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标签在下拉菜单的任何选择“ON”时切换，是否有一种方法可以选择仅显示/隐藏附近的 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

你必须告诉我们更多关于“附近”意味着什么。但似乎缺少的基本部分是在$(this)函数中使用change。您想要识别与.togClass相关的特定 - 正在更改的元素，而不是识别任何 $(this)项。

这是一种方法，假设关联的.togClass div是在DOM中找到的下一个div。

$('[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()？

应该做的伎俩。

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

3 个答案: