Javascript 显示/隐藏同一父div中的元素

当选择select元素（'.select toggle'）的相应选项时，我无法使父组（'.other row'）中的div（'.option other'）显示/隐藏。现在，如果从问题集1或问题集2中选择“其他”，则将显示“.other”选项的两个div。我试着使用.parent（）和.closest（），但似乎无法找到在这个用例中使用它的正确方法

$（“.select toggle”）.change（函数（）{
var oth=假；
$（“.select切换选项：selected”）.each（函数（）{
如果（$（this）.val（）=“oth”）oth=true；
});
if（oth）$（'.option-other'）.show（）；
else$（'.option-other'）.hide（）；
//也尝试过这种方法，但仍然不起作用
//if（oth）$（this）.closest（'.other row'）.children（'.option other'）.show（）；
//else$（this）.closest（'.other row'）.children（'.option other'）.hide（）；
}).change（）

你吃什么东西？
披萨
蛋糕
其他
其他
你喝什么？
水
苏打水
其他
其他
这是一个有点笨重的解决方案，但我做得比较快。这是一种解决办法，需要知道同一类的两个选择器中的哪一个被选中

下面是一个使用您的代码的工作示例


$（“.select toggle”）.change（函数（）{
var oth=假；
$（“。选择切换选项：选中”）。每个（函数（）{
如果（$（this.val（）=“otherFood”）{
oth=真；
$（'.option-other-food'）.show（）；
}否则{
$（'.option-other-food'）.hide（）；
};
if（$（this.val（）=“otherDrink”）{
oth=真；
$（'.option其他饮料'）.show（）；
}否则{
$（'.option其他饮料'）.hide（）；
};
});
}).change（）

你吃什么东西？
披萨
蛋糕
其他
其他
你喝什么？
水
苏打水
其他
其他

很接近，但仅选择每一行的直接子行。
。其他行
。由于
.option other
位于
.col
内
.other行
，
$。子项
无法看到它。改用

这将为整个页面设置一个可见性值：如果至少选择了一个“其他”选项，则显示所有文本输入。
change
事件是针对实际更改的
触发的，因此请将精力集中在该事件上：

var oth = false;
$(this).children("option:selected").each(function() {
  if ($(this).val() == "other") oth = true;
});
if (oth) $(this).closest('.other-row').find('.option-other').show();
else $(this).closest('.other-row').find('.option-other').hide();

这是可行的，但可以更干净。显示或隐藏基于布尔值的元素是jQuery具有函数的一个常见要求：。您可以将
if/else
行替换为

$(this).closest('.other-row').find('.option-other').toggle(oth);

您的
$。每个
循环都做一件事：如果至少存在一个值为
“other”
的选定
，则设置
oth
。通过使用以下命令，可以获得与单行程序相同的逻辑：

（我将
：选择的
更改为，因为您已经在
选项中筛选了
元素，并且。）

最后版本：


$（“.select toggle”）.change（函数（）{
var oth=（$（this）.find（'option:checked[value=“other”]”）。length！==0）；
$（this）.closest（'.other row'）.find（'.option other'）.toggle（oth）；
}).change（）

你吃什么东西？
披萨
蛋糕
其他
其他
你喝什么？
水
苏打水
其他
其他
我知道您在这里做了什么，但我希望避免每个问题集的所有if-else语句，因为有很多“其他”输入。我希望找到一种方法，让它只停留在主父组的范围内，而不为每个组创建独特的属性。哇。感谢这篇精彩的文章，并帮助我更好地优化代码。我在.children（“选项”）之前添加了另一个.children（），因为我在实际用例中使用了一个元素。你会推荐一个.find（）而不是链接两个.children（）.children（“元素”）？@randy我个人会使用
$.find
而不是链接
$.children
，因为无论
是否存在，它都有效。而且，更少的链接意味着代码更容易阅读。（当我在写那部分的时候，我在想“
$。孩子们在这里工作，对吗？
s不能有孙子
s，对吧？”完全忘记了
）
var oth = false;
$(this).children("option:selected").each(function() {
  if ($(this).val() == "other") oth = true;
});
if (oth) $(this).closest('.other-row').find('.option-other').show();
else $(this).closest('.other-row').find('.option-other').hide();

$(this).closest('.other-row').find('.option-other').toggle(oth);

var oth = ($(this).find('option:checked[value="other"]').length !== 0);