Question

我有一个eventlistener，希望点击具有某个类的DOM元素，然后更改innerHTML。它可以工作，除了它改变所有具有相同类的元素的innerHTML，而不仅仅是单击的那个元素。有没有办法将范围限制为单击的元素，或者我是否需要为所有元素提供自己的ID并根据ID调用它们？

这是我正在使用的功能：

$("button.accordion").click(function(){
    if ($(".caretUD").html("&#9660;")) {
            $(".caretUD").html("&#9650;");
    } else {
        console.log("I'm not working...");
    }
});

Answer 1

这有帮助吗？这是当前点击的元素。

请注意，event.currentTarget是记录事件的元素，也是触发事件的元素（可以是event.currentTarget或其自身的子元素）。在您的情况下，使用按钮，它应该是相同的。

$("button.accordion").click(function(event) {
    if ($(this).html("&#9660;")) {
        $(this).html("&#9650;");
    } else {
        console.log("I'm not working...");
    }
});

Answer 2

如果.caretUD和button.accordian都包含在同一容器元素中，那么您需要的是：

$("button.accordion").click(function() {
    var caret = $(this).closest(".container").find(".caretUD");
    if (caret.html() == "&#9660") {
        caret.html("&#9650;");
    } else {
        console.log("I'm not working");
    }
});

将.container替换为包含按钮和相应插入符号的元素的实际类。

Answer 3

var els = document.getElementsByClassName("button.accordion"); // get all the elements with a certain class
    for (var i = 0; i < els.length; i++){
        els[i].addEventListener('click',function(e){
            e.target.innerHTML = "something"; // e attribute is the key in this solution, as it gets the single DOM element that fired the event
        });
    }

jQuery 解决方案：

$("button.accordion").click(function(){
    if ($(this).html() == "&#9660;") {
            $(this).html("&#9650;");
    } else {
        console.log("I'm not working...");
    }
});

选择单个DOM元素

3 个答案: