Question

我有通过jquery生成的动态字段。我可以通过select函数触发器.change显示这些字段。每个选择字段都有三个选项Biology，Calculus和Others-Not listed。选择值Others-not listed的{{1}}时，该函数会显示隐藏的div。我的问题是，如果有两个选择字段，并且选择了一个选项3，它将显示所有其他选择的隐藏div。我想为特定的选择字段显示这个隐藏的div。 JSFIDDLE

Others-not listed

Answer 1

将选择字段的代码更改为：

if ($(this).val() == "3") {
    $(this).parent().find(".hideNewCourse").show();
} else {
    $(this).parent().find(".hideNewCourse").hide();
}

<强> jsFiddle example

在您的代码中，$(".hideNewCourse")将显示或隐藏该类的所有元素。通过使用$(this).parent().find(".hideNewCourse")，您只需选择相对于已更改的选择的元素。

Answer 2

你无论如何委托事件。而不是将事件绑定到每个元素，只需使用 Attribute starts with 选择器。

$(document).on('change',"#coursename_"+i, function(){

可以更改为

$(document).on('change',"[id^=coursename_]", function() {

将其移出showFields方法

要显示和隐藏包含在容器中的特定元素，请使用最接近的混合，它将转到父对象，然后找到该对应块的hideContainer div。

$(".hideNewCourse").show();

然后会改为

$(this).closest('div').find(".hideNewCourse")

<强> Check Fiddle

Answer 3

$(".hideNewCourse").show();

上面代表了这个类的所有元素。

你必须像

一样有选择性

$(this).parent().find(".hideNewCourse").show();

然后，

$(document).on('change',"#coursename_"+i, function(){
                if ($(this).val() == "3"){
                    $(this).parent().find(".hideNewCourse").show();    
                }else{
                    $(this).parent().find(".hideNewCourse").hide();
                }
            });

Fiddle

Answer 4

尝试使用.next()函数，以便它只抓取下一个对象，而不是所有对象：

所以不要这样：

    $(".hideNewCourse").show();

这样做：

     $(this).next(".hideNewCourse").show();

你会为隐藏做同样的事情：

     $(this).next(".hideNewCourse").hide();

选择特定值时显示隐藏的div

4 个答案: