在 jQuery 中使用 .hide() 和 .show()答案

【问题标题】：Using .hide() and .show() in jQuery在 jQuery 中使用 .hide() 和 .show()
【发布时间】：2011-02-15 21:06:55
【问题描述】：

在我的程序中，我有几个非常相似的下拉菜单，它们都具有相同的名称（以下示例中为 foo）。在更改时，它们会隐藏或显示附近的 div 标签，具体取决于是否选择了“ON”。

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

事实上，当下拉菜单的任何选择“ON”时，所有带有“togClass”类的div标签都会切换，有没有一种方法可以选择只显示/隐藏nearby 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>

【问题讨论】：

如果您可以发布您的 html（或者，至少是一个 sn-p）甚至是相同的 JS Fiddle demo，这将更容易回答。
我添加了相关的 HTML 希望对您有所帮助！
我建议使用更具体的选择器 - 人眼更容易阅读，而 jquery 可以更快地定位元素。例如 - $(".class") - 不太好，$("div.class") - 好多了。 $('[name*="foo"]') - $('select[name*="foo"]')。选择器越模糊，jquery 定位元素所花费的时间就越多。

标签： javascript jquery

【解决方案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);
  } 
});

【讨论】：

在您的示例中， $('this') 究竟指的是什么？您在遍历时分享的链接很有帮助，但我不知道从哪里开始。
$(this) 是指触发“更改”的元素，它属于 $('[name*="foo"]') 元素。看看这个link，它解释了this的用法
我已经尝试按照您的建议使用 .closest 以及 .next 和 .parent().next 但它仍然无法正常工作。看看我上面添加的 HTML，你能提出建议吗？
我编辑了我的代码，试试看。我注意到您在代码中有一些错误 - $('[value="ON"]').is(':selected') - 这行意味着您正在选择具有 value 属性的所有元素并检查它是否被选中.相反，您必须只检查发送者（触发“更改”事件的那个）元素值，如下所示：$(this).val() == "ON"
感谢您的所有帮助。我仍然无法让它工作。问题出在这一行： $(this).closest('div.togClass').show('blind', 1000);但对于我的生活，我不知道它有什么问题。

【解决方案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 遍历方法——不太可能是我在示例中随机假设的方法。

【讨论】：

【解决方案3】：

用.closest()怎么样？

应该做的伎俩。

【讨论】：