在jQuery中使用.hide（）和.show（）

Question

在我的程序中，我有幾個非常相似的下拉菜單，它們都具有相同的名稱（以下示例中為foo）。 更改時，它們是否隱藏或顯示附近的div標簽，具體取決於是否選擇了“ ON”。

$('.togClass').hide();
        $('[name*="foo"]').change(function(){
            if ($('[value="ON"]').is(':selected')) {
                $('.togClass').show('blind', 1000);
            } else {
                $('.togClass').hide(1000);
            } 
        });

照原樣，當任何下拉菜單選擇“打開”時，所有具有“ togClass”類的div標簽都會切換，有沒有一種方法可以讓我選擇僅顯示/隱藏附近的 div到選擇的下拉列表中“ ON”（它們嵌套在同一個div中）？ 我不想為每個要隱藏的div編寫此函數的副本。

這是它在HTML中的工作方式：

<select name="foo">
    <option value="OFF">OFF</option>
    <option value="ON">ON</option>
</select><br/>
<div class="togClass">
    //Stuff
</div>

Answer 1

當然可以。 查閱有關遍歷的jquery文檔： http : //api.jquery.com/category/traversing/有很多很好的例子。

對於您的問題，解決方案可能是： .closest（）

$('div.togClass').hide();
$('select[name*="foo"]').change(function(){
  if ($(this).val() == "ON") {
     $(this).siblings('div.togClass').show('blind', 1000);
  } else {
      $(this).siblings('div.togClass').hide(1000);
  } 
});

Answer 2

您必須告訴我們更多有關“附近”的含義的信息。 但是似乎您缺少的基本功能是在change函數中使用$(this) 。 而不是標識任何 .togClass項，而是要標識一個相對於$(this)的特定項-被更改的元素。

這是一種假設關聯的.togClass div是DOM中下一個發現的方法。

$('[name*="foo"]').change(function(){
  if( $(this).is(':selected') ) { // relative to the selected item
    $(this).next('.togClass').show('blind',1000);
  } else {
    $(this).next('.togClass').hide(1000);
  }
});

在您看到.next()您實際上需要適當的jQuery遍歷方法-不太可能是我在示例中隨機假定的方法。

Answer 3

如何使用.closest（）呢？

應該做到的。