基于图像alt标签更改父类

Question

我正在尝试根据其alt标签向图像的父容器添加一个类。我已经看到了几篇关于此的文章，但大多数使用jQuery，而我使用的是香草。

相关页面是Joomla中的类别布局，图像包含3个alt标签中的任意一个。我想更改父类，如果alt标签是两个字符串中的任何一个，而对第三个字符串则什么也不做。对父元素的更改将像我在此处所做的那样插入图像叠加层：single article page

我是JS的新手，并且整日尝试都无济于事。这是我尝试过的CodePen（很容易出错）：CodePen example

非常感谢您的帮助。

    let catImages = document.querySelectorAll('.el-image').alt;
    catImages.forEach(catImage){
    function addSnipe(){
        if(catImages === "Rented"){
            catImages.parentNode.classList.add('rental-snipe-rented');
        }
        else if(catImages === "On Hold"){
            catImages.parentNode.classList.add('rental-snipe-hold');
        } else{};
    };
};
    
    addSnipe();

/* rental status styles */
.wrapper {width: 100%;}
.thirds {display: inline-block; width: 33%; position: relative;}
.rental-snipe-rented::before {
    content: '';
    background-image: url("http://www.j2studio.com/grg3910/images/new-rented-snipe.png");
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
	z-index:9;
}

.rental-snipe-hold::before {
    content: '';
    background-image: url("http://www.j2studio.com/grg3910/images/on-hold-snipe.png");
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
	z-index:9;
}
.rental-status-text {color: #aaa;}
.rental-features {background: #f7f7f7;}
.status-color-rented {background: red; padding: 2px 4px; color: #fff; font-weight: 700;}
.status-color-hold {background: #ffcc00; padding: 2px 4px; color: #000; font-weight: 700;}

   <div class="wrapper">
        <div class="thirds">
            <a href=#>
                <img class="el-image uk-transition-scale-up uk-transition-opaque" alt="Available" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/Living1-4394aeaf.jpeg">
            </a>
            <h3>Property 1</h3>
        </div>
        <div class="thirds">
            <a href=#>
                <img class="el-image uk-transition-scale-up uk-transition-opaque" alt="On Hold" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/eagleswood-810273b3.jpeg">
            </a>
            <h3>Property 2</h3>
        </div>
        <div class="thirds">
            <a href=#>
                <img class="el-image uk-transition-scale-up uk-transition-opaque" alt="Rented" src="http://www.j2studio.com/grg3910/templates/yootheme/cache/picadilly-e22b9e85.jpeg">
            </a>
            <h3>Property 3</h3>
        </div>

    </div>

Answer 1

您可以使用下面的原始js代码实现这一点：-

let catImages = document.querySelectorAll('.el-image'); /* select all nodes with class .el-image */

for(var i = 0; i < catImages.length; i++){ // run for loop on the selected nodes
        if( catImages[i].alt === "Rented"){ // check the condition for alt tag's value
            catImages[i].parentNode.classList.add('rental-snipe-rented'); // add class to parent 
        }
        else if( catImages[i].alt === "On Hold"){
            catImages[i].parentNode.classList.add('rental-snipe-hold');
        }
        else{
             // do this..
        }
    }

希望对您有帮助。