javascript - 将 jQuery 代码编写为循环结构

<分区>

下面的代码可以正常工作，但我不能将它写成循环结构。我需要一个循环，因为 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>

你能帮忙吗？

最佳答案

您的问题是 index 变量。因为它在 for 循环内并在点击事件之后使用。一个可能的解决方案可以基于 IIFE: Immediately Invoked Function Expression为了保留 index 值。

片段:

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>

关于javascript - 将 jQuery 代码编写为循环结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42182066/

上一篇：javascript - jQuery Regex - 查找所有连接的单词

下一篇：javascript - jQuery 正则表达式搜索 - 存储所有变量名称

相关文章：

javascript - 代理索引被转换为字符串

javascript - 我如何匹配除匹配值以外的所有内容？

javascript - 如何在 JavaScript 中使用 Object.create() 创建 HTML DOM 节点？

javascript - 无法为工具提示制作 css 三 Angular 形

internet-explorer - IE9 的 jQuery "Exception thrown and not caught"问题

jquery - insertAfter 在循环内

python - 遍历一个 numpy 数组，然后索引另一个数组中的值

javascript - 获取最接近的数组数

javascript - 显示总计(保留 2 位小数)

javascript - 函数参数在循环内不起作用