选择单个 DOM 元素

Question

我有一个事件监听器，它正在寻找点击某个类的 DOM 元素，然后更改 innerHTML。它可以工作，除了它会更改具有相同类的所有元素的innerHTML，而不仅仅是单击的那个。有没有办法将范围限制为被点击的元素，还是我需要给所有元素自己的 ID 并根据 ID 调用它们？

这是我正在使用的功能：

$("button.accordion").click(function(){
    if ($(".caretUD").html("▼")) {
            $(".caretUD").html("▲");
    } else {
        console.log("I'm not working...");
    }
});

Answer 1

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

请注意，event.currentTarget 是记录事件的元素，也是触发事件的元素（可以是 event.currentTarget 的子元素或它本身）。在你的情况下，有一个按钮，它应该是一样的。

$("button.accordion").click(function(event) {
    if ($(this).html("▼")) {
        $(this).html("▲");
    } 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("▲");
    } 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() == "▼") {
            $(this).html("▲");
    } else {
        console.log("I'm not working...");
    }
});