Question

我需要知道如何使用标准javascript而不是jQuery。

$('form table img').click(function(){
    $('form table img').removeClass('selected')
    $(this).addClass('selected');
});

我有一个无法修改的html文档，它包含以下内容：

<form action="#">
    <table>
        <tr>
            <td><img src="img/sunny.png" alt="Sunny" title="Sunny"></td>
            <td><img src="img/cloudy_snow.png" alt="Clouds with Snow" title="Cloudy with Snow"></td>
            <td><img src="img/sunny_cloudy.png" alt="Sunny with Clouds" title="Sunny with Clouds"></td>
            <td><img src="img/sunny_snow.png" alt="Sunny with Snow" title="Sunny with Snow"></td>
            <td><img src="img/thunderstorm.png" alt="Thunderstorm" title="Thunderstorm"></td>
        </tr>
    </table>
</form>

我需要能够获取单击的图像并将选定的类添加到其中。

Answer 1

[].forEach.call(document.querySelectorAll(".tab-links a"), function(x) {
    x.addEventListener("click", function() {
        [].forEach.call(document.querySelectorAll(".tab-links a"), function(y) {
            x.classList.remove("selected");
        });
        this.classList.add("selected");
    }, false);
});

使用classList对象，您需要迭代，附加事件并重新迭代以删除类selected的实例

Answer 2

您可以Element.classList使用live demo

function addfunction(){
    link.forEach( function(e){
        e.classList.remove('selected');
    });

    this.classList.add('selected');
}

var link = [].slice.call(document.querySelectorAll("form img"));

link.forEach(function(e){
    e.addEventListener("click",addfunction,false);
});

如何将其从jQuery转换为标准javascript？

2 个答案: