如何使用jQuery简洁处理按钮CSS属性用循环优化重复绑定逻辑

算力阿峰

2026-10-1

优化方案

完全可以通过循环简化代码，你只需要注意循环内闭包的变量捕获问题即可，以下是两种常用实现方式：

方式1：使用块级作用域变量（推荐）

ES6的let关键字自带块级作用域，不会出现传统var循环的变量共用问题，代码最简洁：

if (!this.drawnAlready) {
    // 按钮总数量直接取数据集长度即可，无需手动写死
    const btnCount = chartTest.data.datasets.length;
    for (let i = 0; i < btnCount; i++) {
        const $btn = $(`#ds${i}`);
        $btn.css("visibility", "visible");
        $btn.click(function() {
            chartTest.data.datasets[i].hidden = !chartTest.data.datasets[i].hidden;
            chartTest.update();
            $btn.css("text-decoration", chartTest.data.datasets[i].hidden ? "line-through" : "none");
        });
    }
}

方式2：兼容ES5的立即执行函数写法

如果你的项目需要兼容不支持ES6的旧环境，可以用立即执行函数把每次循环的索引锁在独立作用域里：

if (!this.drawnAlready) {
    var btnCount = chartTest.data.datasets.length;
    for (var i = 0; i < btnCount; i++) {
        (function(index) {
            var $btn = $('#ds' + index);
            $btn.css("visibility", "visible");
            $btn.click(function() {
                chartTest.data.datasets[index].hidden = !chartTest.data.datasets[index].hidden;
                chartTest.update();
                $btn.css("text-decoration", chartTest.data.datasets[index].hidden ? "line-through" : "none");
            });
        })(i);
    }
}