0

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

我正在使用的 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');
        }
    });                     
});

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

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

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

4

1 回答 1

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'); 
  });
});
于 2013-11-13T14:43:05.243 回答