jQuery：如何减少事件监听器的数量？答案

【问题标题】：jQuery: How to reduce the number of event listeners?jQuery：如何减少事件监听器的数量？
【发布时间】：2020-11-16 00:53:59
【问题描述】：

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

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。

【问题讨论】：

更好的办法是显示 html 部分...stackoverflow.com/help/how-to-ask
您的代码中有很多问题。您不能使用箭头功能和this 并期望它是您单击的项目。您还添加了一个带有类的#？？

标签： javascript html jquery css design-patterns

【解决方案1】：

只需使用循环：

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

此代码使用template strings。

【讨论】：

【解决方案2】：

使用数据属性是一种典型的做法。

jQuery("[data-color]").on("click", (evt) => {
   const btn = $(evt.target);
   const color = btn.data('color');
   console.log('x', color);
   btn.css("color", color);
   $(".display-img").addClass(color + "-color-image");
});

.blue-color-image {
  background-color: blue;
}

.red-color-image {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" data-color="blue">blue</button>
<button type="button" data-color="red">red</button>

<div class="display-img">XXXXXXXX</div>

【讨论】：

【解决方案3】：

如果都是按钮，可以如下封装成一个。

jQuery('button').on('click', (event) => {
  const className = this.className;
  let color = '';
  if (className.includes('orange-button')) {
    color = 'orange';
  } else if (className.includes('red-button')) {
    color = 'red';
  } else if (className.includes('blue-button')) {
    color = 'blue';
  }
  $(this).css("color", color);
  $(".display-img").addClass(`#${color}-color-image`);
});

【讨论】：