根据图像 alt 标记更改父级 class

Question

我正在尝试根据图像的 alt 标签将 class 添加到图像的父容器中。我看过几篇关于此的帖子，但大多数都使用 jQuery，而我使用的是 vanilla。

有问题的页面是 Joomla 中的类别布局，图像包含 3 个 alt 标签中的任何一个。如果 alt 标记是两个字符串中的任何一个并且对第三个字符串不执行任何操作，我想更改父 class。对父元素的更改将插入一个图像叠加层，就像我在此处所做的那样：single article page

我是js新手，试了一整天都无济于事。这是我尝试过的代码笔（自然会出错）：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..
        }
    }

希望对您有所帮助。

根据图像 alt 标记更改父级 class

Change parent class based on image alt tag

javascript

html

css

ecmascript-6

joomla