根据图像 alt 标记更改父类

Question

我正在尝试根据图像的alt标签将一个类添加到图像的父容器中。我已经看过几篇关于这个的帖子，但大多数使用jQuery，我正在使用香草。

有问题的页面是 Joomla 中的类别布局，图像包含 3 个 alt 标签中的任何一个。如果 alt 标签是两个字符串中的任何一个，而对第三个字符串不执行任何操作，我想更改父类。对父元素的更改将插入图像叠加层，就像我在这里所做的那样：单篇文章页面

我是js的新手，已经尝试了一整天都无济于事。这是我尝试过的CodePen(自然会得到错误(：CodePen示例

任何帮助将不胜感激。

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..
}
}

希望这对你有帮助。