Question

我有一个包含8个选择字段的表单，编号为1到8.我有下面的代码用于显示/隐藏编号为1到8的重复div，但无法弄清楚如何将其放在循环中以防止重复脚本。我应该使用for循环还是每个命令？任何帮助表示赞赏。以下是当前适用于前2个选择框的示例。

jQuery(function() {
    id = 1;
    jQuery('#leveltype' + id).change(function() {
        if (jQuery(this).val() == "recurring") {
            jQuery('#recurring' + id).show();
        } else {
            jQuery('#recurring' + id).hide();
        }
    });
});

jQuery(function() {
    x = 2;
    jQuery('#leveltype' + x).change(function() {
        if (jQuery(this).val() == "recurring") {
            jQuery('#recurring' + x).show();
        } else {
            jQuery('#recurring' + x).hide();
        }
    });
});

Answer 1

首先，尝试使用.on：

设置您的函数以处理更改事件

Documentation

你应该检查'更改'事件。

然后第二，对我来说，你应该考虑将你的函数连接到不是id，而是连接到类名或任何其他非唯一属性。例如，你有8个选择ID id，id2，id3 ...但是它们有类“mySelect”，那么你可以使用类选择器将jQuery连接到它们：

jQuery('.mySelect')...

那应该有用。试试吧。

来自SO.

的示例

Answer 2

尝试将attribute starts与选择器

一起使用

jQuery('[id^=leveltype]').change(function(){
  jQuery('#recurring' + (this.id).replace("leveltype",""))
      .toggle(this.value=="recurring");
});

更好的方法是在此上下文中使用class selector。在此阶段使用data-attribute对我们来说也很方便。

Answer 3

我认为您已尝试过以下操作？：

for(x=1; x<9; x++){
    jQuery('#leveltype' + x).change(function(){
        if (jQuery(this).val() == "recurring") {
            jQuery('#recurring' + x).show();
        } else {
            jQuery('#recurring' + x).hide();
        }
    });
}

这不会起作用，因为在for循环后触发了change函数，所以x将一直是8。要解决这个问题，你需要在更改函数中获取x。为此，您可以使用index函数或将DOM保存在DOM中。

DOM示例：

for(x=1; x<9; x++){
    jQuery('#leveltype' + x).data("num", x);

    jQuery('#leveltype' + x).change(function(){
        if (jQuery(this).val() == "recurring") {
             jQuery('#recurring' + jQuery(this).data("num")).show();
        } else {
            jQuery('#recurring' + jQuery(this).data("num")).hide();
        }
   });
}

Answer 4

我会使用每个回调，在我看来是避免关闭问题的更好选择：

377px

Answer 5

使用class＆＃39; leveltype＆＃39;相反，使用属性data-id =＆＃34; x＆＃34;：

jQuery(function() {
    jQuery('.leveltype').change(function(){
        var t = jQuery(this), x = t.attr('data-id');
        if (t.val() == "recurring") {
            jQuery('#recurring' + x).show();
        } else {
            jQuery('#recurring' + x).hide();
        }
    });
});

jQuery更改多个选择字段的函数循环

5 个答案: