javascript - 为什么这个 JS id 不适用于多个项目

Question

我有一个 2 个按钮和一个图像。每当我按下任何按钮时，图像都会淡出。喜欢这个演示：http: //jsfiddle.net/5wBuV/6/

问题是这仅适用于第一个按钮，而第二个按钮不起作用。这可能是一个简单的错误，但我真的是从 JS 开始的。

    $("#clickedButton").click( function() {
    $("#hide").fadeOut("slow");
    });

Answer 1

元素的 id 必须是唯一的，如果你使用 ID 选择器，jQuery 将只返回第一个具有 id 的元素。

在您的情况下，如果您想将相同的事件处理程序添加到一组元素，您可以使用公共类属性，然后使用类选择器

<!-- The button -->   
<a href="#" class = 'clickedButton'>
    <img src="http://www.kwvs.pepperdine.edu/playbutton.png" />
</a>
<a href="#" class = 'clickedButton'>
    <img src="http://www.kwvs.pepperdine.edu/playbutton.png" />
</a>

然后

$(".clickedButton").click( function() {
    $("#hide").fadeOut("slow");
});

演示：小提琴

Answer 2

使用 id 选择器只会返回零/一个对象。

如果要引用多个对象，请使用类选择器。喜欢：

$('.clickedButton').click(function () {
    $('#hide').fadeOut('slow');
});