將jQuery代碼編寫爲循環結構

以下代碼可以正常工作，但我無法將其編寫爲循環結構。我需要一個循環，因爲26,27,28是模板文件中Smarty變量的值（因此必須用基於Smarty變量定義的JavaScript變量替換26,27,28）。將jQuery代碼編寫爲循環結構

<script type="text/javascript"> 
    $(document).ready(function(){ 

    var name = "product_data"; 

    $("#button_cart_26").click(function() { 
     $('input:radio[name="'+name+'"]')[0].checked = true; 
    }); 

    $("#button_cart_27").click(function() { 
     $('input:radio[name="'+name+'"]')[1].checked = true; 
    }); 

    $("#button_cart_28").click(function() { 
     $('input:radio[name="'+name+'"]')[2].checked = true; 
    }); 

    }); 
</script>

我試過，例如像這樣：

<script type="text/javascript"> 
    $(document).ready(function(){ 

    var name = "product_data"; 

    var index; 
    var a = [26, 27, 28]; 
    for (index = 0; index < a.length; ++index) { 
     //alert("#button_cart_"+a[index]);  //alert is OK 

     $("#button_cart_"+a[index]).click(function() { 
      $('input:radio[name="'+name+'"]')[index].checked = true; 
     }); 
    } 

    }); 
</script>

你能幫忙嗎？

來源

2017-02-11 Emit

我想我有一個簡單的答案，但事實證明這是一個大腦放屁。你能告訴我們什麼是不工作的，並且控制檯中有任何錯誤消息嗎？ – Connum

對於循環結構示例，我沒有得到與「非循環」代碼相同的結果。更確切地說，當點擊id =「＃button_cart_27」的HTML按鈕時，相應的單選按鈕保持未選中狀態。 gaetanoM的答案解決了這個問題。 – Emit

您的問題是索引變量。因爲它位於for循環中，並在點擊事件之後使用。一個可能的解決方案可以基於IIFE: Immediately Invoked Function Expression以便保留索引值。

的片段：

var name = "product_data"; 
 

 
var index; 
 
var a = [26, 27, 28]; 
 
for (index = 0; index < a.length; ++index) { 
 
    (function(index) { 
 
    $("#button_cart_" + a[index]).click(function() { 
 
     $('input:radio[name="' + name + '"]')[index].checked = true; 
 
    }); 
 
    })(index); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form> 
 
    <input type="radio" name="product_data"> 
 
    <input type="radio" name="product_data"> 
 
    <input type="radio" name="product_data"> 
 
</form> 
 

 
<button type="button" id="button_cart_26">Click Me 26</button> 
 
<button type="button" id="button_cart_27">Click Me 27</button> 
 
<button type="button" id="button_cart_28">Click Me 28</button>

來源

2017-02-11 22:52:09 gaetanoM

將jQuery代碼編寫爲循環結構

回答

相關問題