jquery - 同じ ID の 2 つのボタンをフェードする

Question

id='1' のボタンが 2 つあります。最初のボタンをクリックするとフェードアウトしますが、2番目のボタンを押しても変化しません。

$("#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を持つ2つのボタンを持つことはできません。ブラウザは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(); 
});

jFiddle

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