Question

我还在学习如何有效地编写jQuery，但是对于这个实例，我可以使用一些专业知识。以下是缩小jQuery代码的最佳方法：

  $('#nav .wsite-nav-1 a').click(function() {
    $('#nav .wsite-nav-1 a').addClass('show');
  }, function() {
    $('#nav .wsite-nav-1 a').removeClass('show');
  });

  $('#nav .wsite-nav-2 a').click(function() {
    $('#nav .wsite-nav-2 a').addClass('show');
  }, function() {
    $('#nav .wsite-nav-2 a').removeClass('show');
  });

  $('#nav .wsite-nav-3 a').click(function() {
    $('#nav .wsite-nav-3 a').addClass('show');
  }, function() {
    $('#nav .wsite-nav-3 a').removeClass('show');
  });

  $('#nav .wsite-nav-4 a').click(function() {
    $('#nav .wsite-nav-4 a').addClass('show');
  }, function() {
    $('#nav .wsite-nav-4 a').removeClass('show');
  });

Answer 1

我认为你可以通过以下精简的jQuery代码完成上述任务：

var links = $("#nav").find("a");
  links.click(function(e){
    e.preventDefault();
    if($(this).hasClass("show")){
        $(this).removeClass("show");
    }else{
        $(this).addClass("show");
    }
  });

我希望这就是你要找的东西。

Answer 2

在上述帮助和推荐下，我能够构建自己的答案 - 谢谢大家！我使用了一个公共类并切换到toggleClass而不是addClass和removeClass进行压缩：

$('#nav .wsite-menu-item-wrap a').click(function() { 
  $(this).toggleClass('show');
});

我如何压缩这些jQuery代码？

2 个答案: