jquery - 淡化 2 个相同 id 的按钮

Question

我有 2 个 id='1' 的按钮。单击第一个按钮后，它会淡出，但如果我按第二个按钮，它保持不变。

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

Answer 1

如果您想使用相同的选择器淡出 2 个项目，则 id 应该是唯一的，请使用公共类，例如

HTML

<span class="fademe">Bla</span>
<span class="fademe">Bla</span>

JavaScript

$('.fademe').fadeOut('slow');

Answer 2

不能有两个具有相同 ID 的按钮——浏览器假定ID 是唯一的，JavaScript 只会识别具有给定 ID 的第一个元素。

很快就会有人告诉你，ID 也不能以数字开头，但这仅适用于 HTML 4，而且浏览器很少强制执行。尽管如此，这仍被认为是一个坏习惯。

改用通用类：

$(".one").click(function() {
    $(".one").fadeOut("slow");
});

Answer 3

要淡化多个事物，您可以使用class。

HTML

<div class="fade" id="fadeOne">Fade One</div>
<div class="fade" id="fadeTwo">Fade Two</div>

<input type="button" id="fadeButton" value="Fade" />

JS

$('#fadeButton').click(function() {
    $('.fade').fadeOut(); 
});

小提琴

http://jsfiddle.net/4WDV8/

编辑

伙计，我今天太慢了，安迪说得对！

Answer 4

每个元素的 ID 必须是唯一的。尝试使用类而不是id

尝试这个，

<span id="1" class="span">Bla</span>
<span id="2" class="span">Bla</span>

$(".span").click(function(){
  $(this).fadeOut("slow");
});