Question

当我单击单词列表时，我想从图像中添加和删除类。例如，当我单击单词wordarray[i+1]时，我想添加类hello。当我单击hello时，我想删除上一个类bye并将hello添加到图像中。

HTML

bye

JS

<div class="links">
    <ul>
        <li data-name="hello">Hello</li>
        <li data-name="bye">Bye</li>
    </ul>
</div>

<div class="image">
    <img class="main-image" src="image.png" alt="image">
</div>

Answer 1

在您的情况下，这是一个“ li”元素。如果您要修改图片元素，则应像第一次修改一样通过引用名称来完成。

https://jsfiddle.net/hpmje7ua/17/

JS

$('ul li').on('click', function() {
    var name = $(this).data('name');
    var elements = document.getElementsByTagName('li');
    for (var i=0; i<elements.length; i++) {
        $('.main-image').removeClass(elements[i].getAttribute('data-name'));
    };
    $('.main-image').addClass(name);
});

Answer 2

我添加了另一个li进行测试：

这是一个正在工作的小提琴：http://jsfiddle.net/0j4g96tL/50/

<div class="links">
    <ul>
        <li data-name="hello">Hello</li>
        <li data-name="bye">Bye</li>
        <li data-name="hey">Hey</li>
    </ul>
</div> <!-- .links -->

<div class="image">
    <img class="main-image" src="image.png" alt="image">
</div> <!-- .image -->

代码如下：

$('ul li').on('click', function() {

    // Get the class of the clicked list.
    var name = $(this).data('name'),

    // Get that clicked list siblings, In that case the other two lists.
        siblingElements = $(this).siblings();

    //Loop through the siblings.
    for(var i = 0; i < siblingElements.length; i++){

        // Remove the two other siblings classes from the image.
        $('.main-image').removeClass( siblingElements[i]['attributes']['data-name']['value'] );

    } // End loop.

    // Add the clicked list class to the image.
    $('.main-image').addClass(name);

}); // End onclick function.

从图像添加和删除类名称

2 个答案: