Javascript 基于多个对象的下拉选择显示/隐藏div

我使用rails生成一个表单，允许用户使用add按钮添加表单实例。表单的每个实例都包装在一个div标记中，该标记带有一个“fields”类。我想使用JS在每个表单实例中显示和隐藏div

我正在努力找出为什么我的JS都不能正常工作

#我的HTML的结构
生意
个人的
商业领域

个人领域

生意
个人的
商业领域

个人领域

#JS
$（函数（）{
$（“.fields”）.each（函数（）{
$（“#个人”）.hide（）；
$（“#业务”）.hide（）；
$（'.type'）。在（'change'，函数（）{
如果（this.value==='business'）{
$（“#业务”）.show（）；
}否则{
$（“#个人”）.hide（）；
}
});
});
});

足够简单：

$(".fields div:not(.business)").hide();

$('.type').on('change', function () {
    var x = this.value;
    $(this).siblings('div').not('.'+x).hide().siblings('.'+x).show();
});

顺便说一下，您的

.personal

div包含“Business”，反之亦然请正确设置，使代码正常工作。

---

您不能在HTML页面上两次使用相同的

id

。

#personal

&

#business

必须是类，而不是id，它们是否不是唯一的。现在可以更新问题了。但是，即使进行了这些更改，hide（）方法也无法工作。

$(".fields div:not(.business)").hide();

$('.type').on('change', function () {
    var x = this.value;
    $(this).siblings('div').not('.'+x).hide().siblings('.'+x).show();
});