Question

我正在系统地构建jQuery函数，使得Web表单中各种输入的css类依赖于其他输入（即，当给定输入具有给定值时，“hide”类将从适当的后续输入中删除等）

我正在使用的jQuery的一个特定（工作）示例是：

$(document).ready(function(){               
    $("input[name$='q_4']").change(function(){
        if(this.value == 'Yes') {
             $('#qu_5').removeClass('hide');
        } else {
             $('#qu_5').addClass('hide');
        }
    });             
});

在此示例中，从属问题div（＃qu_5）取决于通过单选按钮输入的值（name = q_4）为“是”。

因为我正在通过数据库动态构建这些函数（用户可以编辑问题的属性，使得它们具有这些类型的显示依赖性），所以我最终会在具有多个相互依赖的输入的页面上使用此代码的多个块。每个代码块都有主问题的名称，奴隶问题的id和奴隶依赖的值。这也符合预期。

但有时，一个输入应该显示多个其他问题，所以我最终得到的代码如下：

$(document).ready(function(){               
    $("input[name$='q_87']").change(function(){
        if(this.value == 'yes') {
             $('#qu_88').removeClass('hide');
        } else {
             $('#qu_88').addClass('hide');
        }
    });                 

    $("input[name$='q_87']").change(function(){
        if(this.value == 'yes') {
             $('#qu_89').removeClass('hide');
        } else {
             $('#qu_89').addClass('hide');
        }
    });                     
});

这不起作用。（并且确实停止在该页面上工作的所有显示/隐藏功能）

我认为这是因为jQuery / javascript对同一事件input[name$='q_87']").change触发两个不同的函数感到不满意？这是我唯一能想到的。

有没有人对我如何以有效的方式实现我想要的东西有任何建议？谢谢！：）

Answer 1

如果您需要var和数组，可以像这样编写

var questions = {
  "q_87":["qu_88","qu_89"],
  "q_96":["qu_95","qu_99"]
}


$.each(questions,function(q,arr) {
  $("input[name$='"+q+"']").change(function(){    
    $("'#"+arr.join(",#")+"'").toggleClass('hide',this.value == 'yes'); 
  });
});

jQuery：单个更改事件，用于触发多个不起作用的函数

1 个答案: