jQuery:单个更改事件以触发多个函数不起作用

jQuery: Single change event to fire multiple functions not working

本文关键字：函数 不起作用 单个更 事件 jQuery      更新时间：2023-09-26

我正在系统地构建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对同一事件不满意？这是我唯一能想到的。

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

如果你需要一个变量和一个数组，你可以这样写

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'); 
  });
});
相关文章：