複数のDOMオブジェクトのjQuery単一イベント

Question

私はDOM内のいくつかのオブジェクトに対して変更イベントトリガーを作成しようとしています。披露させて;私はこのコード

$(document).ready(function() { 
    $(".select_something").change(function() { 
     if (!($(".select_something option[value='0']").attr("selected"))) { 
      $(".write_something").css('display',''); 
     } 
     else 
     { 
      $(".write_something").css('display','none'); 
     } 
    }); 
}); 

そして、これで私は.select_somethingと呼ばれているすべては、いくつかのセレクタ/ドロップダウンを持っています。 のオプションがのデフォルト値（0）でない場合は、<textarea></textarea>が表示され、すべてが.write_somethingと表示されます。

全く単純な機能です。

私が経験している問題は、これが最初の.select_somethingと.write_somethingペアにのみ影響し、残りは影響を受けないということです。

私は.find()、.parent()、.children()と混ぜて試してみました。

トリガーされたときに私の.select_somethingと.write_somethingのペアがすべて変更されるようにするにはどうすればよいですか？

編集：IDは、もちろんクラスとされていました。

Answer 1

#select_something 

です。 ID はでなければなりません。同じidを持つ複数の要素がある場合、それは基本的には間違っています（大きな問題を引き起こします）。

これは言いましたが、修正は簡単です：これらのIDをCSSクラスに変更します。

<select id="select_something"> 

その後、あなたはCSSクラスに対して選択することができ、もちろん、あなたが選択する必要があります

<select class="select_something"> 

次のようになります。現在の選択に対するwrite_something要素を。

$(".select_something").change(function() { 
    if (!($("option[value='0']", this).attr("selected"))) { 
     $(this).siblings(".write_something").css('display',''); 
    } 
    else 
    { 
     $(this).siblings(".write_something").css('display','none'); 
    } 
}); 

Answer 2

共通のIDではなく、複数のオブジェクトに共通のクラスを使用する必要があります。

ID属性は、単一のアイテムを識別するために使用されます。 CLASS属性は、項目が同じクラス名を持つ項目のグループの一部であることを定義するために使用されます。

は、それらのすべてにクラス名selectObjectを使用して、...ここで

$(document).ready(function() { 
    $(".selectObject").change(function() { 

     //inside of an event, $(this) refers to the object that triggers the event, 
     //in this case, the item that was clicked. 

     if (!($(this).val()==0)) { 
      ... 
     } 
     else 
     { 
      ... 
     } 
    }); 
}); 

は、説明のためのものです。 http://jsfiddle.net/FxLSR/1/

Answer 3

他の回答とコメントで述べたように、一意の要素にはIDのみを使用し、複数の要素にはクラスを使用します。

これは私がセットアップ私のコードだろうかです：要素はのように隣同士に配置することができない場合は

$(document).ready(function() { 
    $(".select_something").change(function() { 
     if (!($(this).val() == "0") { 
      $(this).next().show(); 
     } 
     else 
     { 
      $(this).next().hide(); 
     } 
    }); 
}); 

：

HTML：

<div> 
    <select class="select_something"> ... </select> 
    <textarea class="write_something"> ...</textarea> 
</div> 
<div> 
    <select class="select_something"> ... </select> 
    <textarea class="write_something"> ...</textarea> 
</div> 

etc... 

のJavascript私が与えたHTMLコードの例では、すべてのテキスト領域を選択していないような相対セレクタを使用してテキスト領域を選択してください。たとえば、2人が兄弟であるが、隣り合わせでない場合は、次のようになります。$（this）兄弟（ "。write_something"）