Question

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

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

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

Answer 1

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

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

<!-- 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");
});

演示：Fiddle

Answer 2

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

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

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

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

2 个答案: