Question

寻求缩短此代码块的帮助：

编辑：这是“列表”的一部分（此处显示3个），但我的实际代码为6。

<script>
 $('.clickme-newyork, #link4, #link8, #link9').hover(function() {
   $(".card-cp").addClass("card-bg-cp");
   $(".card-gv").addClass("card-bg-gv");
   $(".card-hcm").addClass("card-bg-hcm");   
 }); 
</script>

这无效：

<script>
 $('.clickme-newyork, #link4, #link8, #link9').hover(function() {
   $(".card-cp, .card-gv, .card-hcm").addClass("card-bg-cp, card-bg-gv, card-bg-hcm");
 }); 
</script>

Answer 1

推断评论，你需要决定是否＆＃34;凝聚＆＃34;你的代码是非常必要的。正如@Mojtaba所说，你可以编写一个以编程方式完成这项工作的函数。例如：

function myAddClass(target, classname) {
    $(target).addClass(classname);
}

然后你会......

<script>
 $('.clickme-newyork, #link4, #link8, #link9').hover(function() {
      myAddClass(".card-cp","card-bg-cp");
      .... 
 }); 
</script>

不是很缩短＆＃39;是吗？

但是如果你有很多这样的事情要做，你可以将它们放入一个数组中并使用myAddClass（）函数循环遍历它们。那个可能会为你节省一些空间 - 但真正的问题是：快捷方式是否使代码更短（或更容易阅读）？一般来说，jQuery库已经为那些冗长的代码块提供了很好的快捷方式。所以也许你最好的办法是保留你的代码。

Answer 2

你可以尝试

var classMap = [
    [".card-cp","card-bg-cp"],[".card-gv","card-bg-gv"],[".card-hcm","card-bg-hcm"]
];

$(".clickme-newyork, #link4, #link8, #link9").hover(
  function() {  // when the mouse pointer enters the element.
    $.map( classMap, function( c, i  ) { $( c[0] ).addClass( c[1] ); });
  });

制作一个JSFiddle来查看结果 https://jsfiddle.net/sysdevcode/u7kfsf65/

链接到Jquery地图：http://api.jquery.com/map/

Answer 3

$('.clickme').hover(function() {
   $(".card-cp, .card-gv, .card-hcm").addClass(function(index, className){
      switch(className){
        case 'card-cp': return 'card-bg-cp';
        case 'card-gv': return 'card-bg-gv';
        case 'card-hcm': return 'card-bg-hcm';
      }
   });
 });

Fiddle: https://jsfiddle.net/red2678/20Lurcx2/8/

如何压缩这个jquery代码？

3 个答案: