javascript - jQuery：如何减少事件监听器的数量？

Question

我有一个页面，其中包含四个不同的按钮和代码，如下所示：

jQuery(".orange-button").on("click", () => {
   $(this).css("color", "orange");
   $(".display-img").addClass("#orange-color-image");
   ...
});

jQuery(".red-button").on("click", () => {
   $(this).css("color", "red");
   $(".display-img").addClass("#red-color-image");
   ...
});

jQuery(".blue-button").on("click", () => {
   $(this).css("color", "blue");
   $(".display-img").addClass("#blue-color-image");
   ...
});

...

有没有办法压缩这段代码？它们都做非常相似的事情，但应用了不同的类和 CSS。

标签： javascripthtmljquerycssdesign-patterns

Answer 1

只需使用一个循环：

for (const color of ["orange", "red", "blue"]) {
    jQuery(`.${color}-button`).on("click", () => {
        $(this).css("color", color);
        $(".display-img").addClass(`#${color}-color-image`);
        // ...
    });
}

此代码使用模板字符串。