使用Javascript循環來檢測類似的單選按鈕的變化，然後執行代碼

我正在創建基於用戶輸入創建HTML代碼的表單，我在使用某些javascript功能時遇到了一些麻煩。我想要表單的某些部分被隱藏，除非他們需要（例如，如果用戶想要添加回扣到特殊編碼的瓶子，則顯示隱藏的回扣字段。）使用Javascript循環來檢測類似的單選按鈕的變化，然後執行代碼

此處是我以前使用隱藏或顯示一個div（＃rebatebs1）的基礎上是否單選按鈕（名稱=「bottlespecial1rebate」）選擇了一個特定的值一些代碼：

hidebottlespecial1Rebate = function() { 
     $('#rebatebs1').hide(); 
    }; 

    bottlespecial1RebateSelection = function() { 
     hidebottlespecial1Rebate(); 

     switch ($(this).val()) { 
      case 'yes': 
       $('#rebatebs1').show(); 
      break; 
      case 'no': 
       $('#rebatebs1').hide(); 
      break; 
     } 
    }; 


    $(function() { 

     $('input[name=bottlespecial1rebate]:radio').change(bottlespecial1RebateSelection); 

     bottlespecial1RebateSelection.apply($('input[name=bottlespecial1rebate]:radio')); 
    });

我的問題是，我有12個不同的radiobutton/div組合，我想應用此代碼，而無需複製/粘貼它12次，每次更改選擇器（例如＃rebatebs2 &＃bottlespecial2rebate，＃rebatebs3 &＃bottlespecial3rebate等）。

我試着寫了一個for循環，用一個變量替換了數字，但是我不太瞭解JavaScript（我是一個自學成才的新手），因此很不幸地讓它工作。如果任何人都可以指向正確的方向，讓它適用於12種不同的單選按鈕/ div組合，我會非常感激。

來源

2014-01-28 TMax

更改您的HTML作爲，在這裏你可以數據相關-DIV定製數據 - *屬性

<input type="radio" name="bottlespecial1rebate" value="yes" 
    data-related-div="rebate1">Yes<br> 
<input type="radio" name="bottlespecial1rebate" value="no" 
    data-related-div="rebate1">No

HTML

您可以使用Attribute Starts With Selector [name^="value"]綁定事件，如

$('input:radio[name^="bottlespecial"]').change(bottlespecial1RebateSelection);

您可以存儲divs來顯示/隱藏HTML可以提取我們荷蘭國際集團.data()

bottlespecial1RebateSelection = function() { 
    var relatedDiv = "#" + $(this).data('related-div'); 
    switch ($(this).val()) { 
     case 'yes': 
      $(relatedDiv).show(); 
     break; 
     case 'no': 
      $(relatedDiv).hide(); 
     break; 
    } 
};

Fiddle DEMO

來源

2014-01-28 17:53:42 Satpal

這完美的作品。非常感謝你，Satpal。 – TMax

@TimothyMaxwell，很高興能幫到你 – Satpal

一個快速和骯髒的方法是這樣的

var ids = ['list', 'of', 'radio', 'button', 'id']; 

for (var i in ids) { 
    (function(ids[i]){ 
     var el = $('#'+id); 
     var bottlespecial1RebateSelection = function() { 
      el.hide(); 

      switch ($(this).val()) { 
       case 'yes': 
        el.show(); 
       break; 
       case 'no': 
        el.hide(); 
       break; 
      } 
     } 
     el.change(bottlespecial1RebateSelection); 
     bottlespecial1RebateSelection.apply(el); 
    })(id) 
}

唯一特別的就是for循環，因爲你在for循環內生成函數（非常不鼓勵），您需要使用自動執行功能來保留i的值。這通常被稱爲infamous loop javascript問題

但是，如果您要長期使用Javascript，知道這種東西可能是有益的，因爲在某些特殊情況下for循環中生成函數將爲您節省大量時間

來源

2014-01-28 17:54:03

謝謝，譚。這很好理解！ – TMax

檢測到您的所有單選按鈕的變化，你可以先包裝你的單選按鈕的div元素，給像bottlespecialrebates一個唯一的ID做：

$(document).on("change","#bottlespecialrebates input:radio", function(){ 
    bottlespecial1RebateSelection.apply($(this)); 
});

或只使用一種的屬性contains選擇器（使用^=符號）：

$(document).on("change","input[name^=bottlespecial]:radio", function(){ 
    bottlespecial1RebateSelection.apply($(this)); 
});

整點是您添加更改偵聽器的方式。

來源

2014-01-28 17:54:20

謝謝，梅蘭。我不知道包含選擇器，所以這很有幫助。 – TMax

@Timothy Maxwell：不客氣，如果有幫助，你可以投票或接受它。有一個很好的編碼晚上。 –

使用Javascript循環來檢測類似的單選按鈕的變化，然後執行代碼

回答

相關問題