幾個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的元素，那從根本上是錯誤的（並且會導致你很大的問題）。

話雖如此，修復很簡單：將這些ID更改爲CSS類。

<select id="select_something"> 

成爲

<select class="select_something"> 

然後，你可以對CSS類選擇，當然你必須選擇：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，對多個元素使用類。

這是怎麼會有我安裝我的代碼：

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：

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

如果要素不能放在旁邊彼此在我給出的示例HTML代碼，然後確保使用某種相對選擇器來選擇textarea，這樣就不會選擇所有文本區域。例如，如果兩個人是兄弟姐妹但彼此不相鄰，請使用：$（this）.siblings（「。write_something」）