Question

以下代码可以正常工作，但我不能将其作为循环结构编写。我需要一个循环，因为26,27,28是模板文件中Smarty变量的值（因此26,27,28必须替换为基于Smarty变量定义的JavaScript变量）。

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

将jQuery代码写为循环结构

1 个答案: