jQuery更改函數循環多個選擇字段

我有一個窗體，8個選擇字段編號1到8.我有下面的代碼工作，以顯示/隱藏重複編號1到8，但無法弄清楚如何把它在一個循環中防止重複的腳本。我應該使用for循環還是每個命令？任何幫助表示讚賞。以下是前2個選擇框當前工作的示例。jQuery更改函數循環多個選擇字段

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(); 
     } 
    }); 
});

來源

2016-03-06 David Light

首先，嘗試設置您的功能上的改變事件的工作，使用。對：

Documentation

在那裏，你應該檢查 '變' 事件。

然後第二，對於我來說，你應該考慮連接你的函數不是在ID上，而是在類名或其他任何不是唯一的屬性上。例如，你有8個選擇與IDS ID1，ID2，ID3 ......，但他們有類「mySelect」，那麼你可以使用類選擇連接的jQuery對他們說：

jQuery('.mySelect')...

這應該工作。嘗試一下。從SO.

來源

2016-03-06 10:31:08 Bandydan

不要鏈接到w3schools，他們是一個真正不好的資源。有更好的資源，例如jQuery文檔。 – Tomalak

是的，只是訪問w3fools.com –

好的，將更改爲官方文檔 – Bandydan

嘗試

示例使用attribute starts與選擇，

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

而更好的辦法是，在這種情況下被使用class selector。在這個階段，使用data-attribute也會很方便。

來源

2016-03-06 10:32:58

我asume你曾嘗試以下？：

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(); 
     } 
    }); 
}

因爲改變功能後解僱這不會工作了已經循環，所以x是8所有的時間。爲了解決這個問題，你需要在變化函數中獲得x。爲此，您可以使用index函數或將x保存在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(); 
     } 
    }); 
}

來源

2016-03-06 10:34:07

謝謝！ II已經嘗試了你列出的第一個版本，並且按照你的說法失敗了。讓你的修改工作。 –

我會用每一個回調，在我看來是一個更好的選擇，以避免關閉的問題：

var myCallback = function(index, value) { 
     value.change(function(){ 
      if (jQuery(this).val() == "recurring") { 
       jQuery('#recurring' + index).show(); 
      } else { 
       jQuery('#recurring' + index).hide(); 
      } 
     }); 


}; 

var myArray = $('#leveltype'); 
jQuery.each(myArray, myCallback (index, value));

來源

2016-03-06 10:34:35 JulioCT

這是完全不必要的，違背了jQuery的使用模式。幾乎所有的jQuery函數都會影響所有選定的元素，因此不需要調用'.each'來附加一個事件處理函數。 – Tomalak

使用類「leveltype」相反，與屬性data-id =「x」：

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(); 
     } 
    }); 
});

來源

2016-03-06 10:52:07 ThangTD

他們都在一個級別類。這比上面列出的for循環更好，我已經開始工作了嗎？ –

其實for循環的方式也是可行的，但我很少看到人們把事件監聽器放在for循環中。事實上，使用類，你讓jQuery爲你循環，而不是寫自己的。 – ThangTD

jQuery更改函數循環多個選擇字段

回答

相關問題