选择某个值时显示隐藏的 div答案

【问题标题】：Show hidden div when certain value is selected选择某个值时显示隐藏的 div
【发布时间】：2013-12-09 20:38:36
【问题描述】：

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

$(document).ready(function() {
    $('select').change(function() {
        var option = $(this).val();
        showFields(option);
        return false;
    });
    function showFields(option){ 

        var content = '';
        for (var i = 1; i <= option; i++){
            content += '<div id="course_' + i + '"><label>Course # ' + i + '</label><br /><label>Course Name:</label> <select id="coursename_' + i + '" name="coursename_' + i + '" class="ddlcss"><option value="">--- Select ---</option>"'
            content += '<option value="1">Biology</option>'; content += '<option value="2">Calculus</option>'; content += '<option value="3">Other - Not Listed</option>'; '"';

            content += '</select><div class="hideNewCourse" style="display:none;"><label for="newCourse_'+i+'">Add Course Name to List:</label><input type="text" id="newCourse_'+i+'" name="newCourse_'+i+'"/></div></br></div>';

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

        }
        $('#course_catalog').html(content);
    }
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

无论如何，您都在委派活动。而不是专门将事件绑定到每个元素，只需使用 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

【讨论】：

这也很有帮助。我阅读了更多关于它的信息。会用这个。
你超出了我的要求。谢谢。
@techAddict82.. 很高兴能帮上忙 :)

【解决方案2】：

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

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

jsFiddle example

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

【讨论】：

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

【讨论】：

【解决方案4】：

尝试使用.next() 函数，让它只抓取下一个对象，而不是全部：

所以不要这样：

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

这样做：

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

你也会对 hide 做同样的事情：

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

【讨论】：