根据图像 alt 标签更改父类

Question

我正在尝试根据它们的 alt 标签向图像的父容器添加一个类。我看过几篇关于这个的帖子，但大多数都使用 jQuery，而我使用的是 vanilla。

有问题的页面是 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

您可以使用以下 vanilla 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..
        }
    }

希望对你有所帮助。