jQuery 如何更好地编写代码

Question

如何使这段代码更短，我对jquery很陌生，但我设法构建了我想要的东西，但是有没有其他方法可以更好地做到这一点。

谢谢!

<script type="text/javascript"> 

       $(document).ready(function () {
       $(".genre").click(function () {
       $(".sobox").hide(); 
       $(".fobox").fadeIn() 
       $("#notcurrent").css({"background":"#9aa0ae", "color":"#fefefe"}); 
       $("#current").css({"background":"#2568be", "color":"#fff"}); 

         });

       $(".other").click(function () {
       $(".fobox").hide();  
       $(".sobox").fadeIn();  
       $("#current").css({"background":"#9aa0ae", "color":"#fefefe"}); 
       $("#notcurrent").css({"background":"#2568be", "color":"#fff"}); 

       });
      });

</script> 

Answer 1

我没有发现您现有的代码存在任何严重问题，但您可以将 CSS 样式对象存储在变量中而不是重复它们。

此外，只要定义单击事件处理程序时 DOM 中存在所有元素，您就可以使用缓存的 jQuery 选择器来获得较小的性能提升。

即假设在您的第一个事件处理程序中，您打算更改 #notcurrent 元素的样式，而不是不同的 #ncurrent 元素，并且 fobox/sobox/current/notcurrent 元素在 DOM 初始加载时存在:

<script type="text/javascript"> 

$(document).ready(function () {
  var styleA = {"background":"#9aa0ae", "color":"#fefefe"},
      styleB = {"background":"#2568be", "color":"#fff"},
      current = $("#current"),
      notCurrent = $("#notcurrent"),
      fobox = $(".fobox"),
      sobox = $(".sobox");

  $(".genre").click(function () {
    sobox.hide(); 
    fobox.fadeIn() 
    notCurrent.css(styleA); 
    current.css(styleB);
  });

  $(".other").click(function () {
    fobox.hide();  
    sobox.fadeIn();  
    current.css(styleA); 
    notCurrent.css(styleB); 
  });
});

</script>

长话短说，我没有看到显着减少代码大小的明确方法，但有一些方法可以使其在保持可读性的同时提高效率。其他答案显示了如何定义单个回调函数，从而减少代码量。