谁能建议如何缩短此代码以获得更好的性能？答案

【问题标题】：can anyone suggest how to make this code short for better performance?谁能建议如何缩短此代码以获得更好的性能？
【发布时间】：2021-08-27 12:46:07
【问题描述】：

谁能建议如何缩短这段代码以获得更好的性能？我正在使用以下代码，但我认为执行小任务的方式很大，所以请建议我编写此代码的更好方法

jQuery(document).ready(function() {
  jQuery(".tab_counter_0").click(function() {
    jQuery(".all_colors").removeClass("msk_custom_colors_1 msk_custom_colors_2 msk_custom_colors_3 msk_custom_colors_4");
  });
  jQuery(".tab_counter_1").click(function() {
    jQuery(".all_colors").removeClass("msk_custom_colors_2 msk_custom_colors_3 msk_custom_colors_4");
    jQuery(".all_colors").addClass("msk_custom_colors_1 ");
  });
  jQuery(".tab_counter_2").click(function() {
    jQuery(".all_colors").removeClass("msk_custom_colors_1 msk_custom_colors_3 msk_custom_colors_4 ");
    jQuery(".all_colors").addClass("msk_custom_colors_2");
  });
  jQuery(".tab_counter_3").click(function() {
    jQuery(".all_colors").removeClass("msk_custom_colors_2 msk_custom_colors_1 msk_custom_colors_4");
    jQuery(".all_colors").addClass("msk_custom_colors_3");
  });
  jQuery(".tab_counter_4").click(function() {
    jQuery(".all_colors").removeClass("msk_custom_colors_3 msk_custom_colors_2 msk_custom_colors_1");
    jQuery(".all_colors").addClass("msk_custom_colors_4");
  });
});

【问题讨论】：

我觉得如果你把这个问题发到codereview
你的代码好像没问题

标签： jquery performance onclick

【解决方案1】：

您可以将事件处理程序组合成一个事件，使用 this 和数据驱动代码来应用类

$(".all_colors").addClass("msk_custom_colors_" + $(this).data("colour"))

.removeClass 可以通过更改重置类来进一步改进，然后您可以添加新的custom_colors_<n> 而无需更改您的 js。

一种方法可能是：

$(".all_colors")[0].classList = $(".all_colors").data("default");

data-default= 默认类列表。

或者，您可以清除 classList 并将其设置在代码中。取决于.all_colors 是否为单个元素，在这种情况下使用id=。

正如您所见，有多种不同的方法可以做到这一点，这里有一个：

$(".tab_counter")
  .css("cursor", "pointer")
  .click(function() {
    $(".all_colors")[0].classList = $(".all_colors").data("default");
    $(".all_colors").addClass("msk_custom_colors_" + $(this).data("colour"))
  });

.msk_custom_colors_0 { /* none */ }
.msk_custom_colors_1 { color: red }
.msk_custom_colors_2 { color: green }
.msk_custom_colors_3 { color: blue }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tab_counter'>clear</div>
<div class='tab_counter' data-colour="1">1</div>
<div class='tab_counter' data-colour="2">2</div>
<div class='tab_counter' data-colour="3">3</div>
<div class='all_colors msk_custom_colors_3' data-default='all_colors'>result</div>

【讨论】：

【解决方案2】：

这是另一种方式，只是为了好玩！ :)

var all_numbers = [0, 1, 2, 3, 4];

jQuery("[class*=tab_counter_]").click(function() {
  // class attribute of element as string
  var classes = jQuery(this).attr('class');

  // regex to find clicked number
  var clicked_number = classes.match(/(?<=tab_counter_)[\d]{1}/i)[0]; 

  // array of all numbers except clicked one
  var filtered_numbers = all_numbers.filter(x => x != clicked_number) 

  // create a list of classes to exclude
  var classes_to_remove = Array.from(filtered_numbers, (x) => `msk_custom_colors_${x}`).join(' ')

  jQuery(".all_colors").removeClass(classes_to_remove);
  jQuery(".all_colors").addClass("msk_custom_colors_"+clicked_number);
});

.msk_custom_colors_0 { /* None */ }
.msk_custom_colors_1 { background-color: blue; }
.msk_custom_colors_2 { background-color: red; }
.msk_custom_colors_3 { background-color: green; }
.msk_custom_colors_4 { background-color: fuchsia; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
  <button class="tab_counter_0">0</button>
  <button class="tab_counter_1">1</button>
  <button class="tab_counter_2">2</button>
  <button class="tab_counter_3">3</button>
  <button class="tab_counter_4">4</button>
</p>

<p class="all_colors">All Colors</p>

【讨论】：