Напишите код jQuery как структуру цикла

Question

Следующий код работает отлично, как показано ниже, но я не могу написать его как структуру цикла. Мне нужен цикл, потому что 26, 27, 28 являются значениями переменной Smarty в файле шаблона (поэтому 26, 27, 28 необходимо заменить переменной JavaScript, определенной на основе переменной Smarty).

<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> 

Вы можете помочь, пожалуйста?

Answer 1

Ваш номер индекс переменная. Потому что он находится внутри цикла for и используется после события click. Возможное решение может быть основано на 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>