Question

有没有人知道如何检测一系列图像输入按钮中的哪一个被点击，并相应地执行一些javascript？

例如，如果单击“关于”按钮，页面上的“关于”标题将变为蓝色。我可以单独做这个，但有一个循环或什么来削减它？提前谢谢！

Answer 1

如果您的按钮共享一个班级，您可以使用document.querySelectorAll选择所有按钮，并使用Array.prototype.forEach.call进行迭代：

<button class="about-button" id="a">a</button>
<button class="about-button" id="b">b</button>
<button class="about-button" id="c">c</button>
<script>
    [].forEach.call(document.querySelectorAll('.about-button'), function(el) {
        el.addEventListener('click', imageButtonClickHandler);
    });

    function imageButtonClickHandler() {
        alert('button clicked: ' + this.id);
    }
</script>

Answer 2

如果您使用的是jQuery，则可以使用.on方法：

$("#about").on("click", function(event){
  $(this).css("background-color", "blue"); // Or RGB color, just like in the CSS
});

来源：http://api.jquery.com/on/和http://api.jquery.com/css/

Answer 3

问题尚不完全清楚，但我会尝试根据一些假设来回答这个问题。

如果要动态创建图像按钮，那么我会将一个onclick事件处理程序附加到所有添加的图像按钮，并将“this”作为参数传递给处理程序。这样点击处理程序可以查看传入的DOM元素。

<a onclick="imageClicked(this)"><img src="about.jpg" /></a>

如果元素在页面上声明，而不是动态添加，我会为每个图像按钮绑定click事件（如果它们不是那么多）（正如@Joshua Brodie指出的那样）。如果有很多，我会有一个点击处理程序，并在“数据”属性中具有特定于图像按钮的数据。

<a class="imgbtn" data-buttonname="about"><img src="about.jpg" /></a>

$('.imagebtn').bind('click', function () {
  console.log($(this).data('buttonname')); // about
});

用javascript检测onclick

3 个答案: