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，并且在最初加载DOM时存在fobox/sobox/current/notcurrent元素：

<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>

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

Answer 2

我认为你的代码很好。

但是既然你已经问过了，另一种方法是在你的样式表中定义一些类，而不是直接在你的JavaScript中编写CSS属性，那么你可以通过使用jQuery {{3}来整理你的JS。 }和.toggle()方法：

.class1 {
    background:#9aa0ae;
    color:#fefefe;
}

.class2 {
    background : #2568be;
    color : #fff
}

$(document).ready(function () {
  $(".genre, .other").click(function () {
     $(".sobox,.fobox").toggle("fast"); 
     $("#notcurrent,#current").toggleClass("class1 class2");
   });
});

您最初需要将sobox或fobox类中的一个或另一个分配为display:none，并分别给出“notcurrent”和“current”元素“class1”和“class2”，如本工作演示中所示：toggleClass()（显然你会得到比我的“class1”和“class2”更有意义的类名......）

Answer 3

格式化评论不好，所以在此粘贴。

我认为这段代码很好。它没有错。你可以试试，

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

指出您可以选择多于1个班级。因此，你处理。

Answer 4

我唯一建议的是添加类而不是直接通过jquery修改css。除此之外，我没有看到任何看起来需要重构的东西 - 这里没有太多代码可以开始。

Answer 5

一种加载的问题，因为我们只能猜出代码的意图是什么。如果不推荐不同的方法，最好缓存多次使用的jQuery对象：

$(document).ready(function () {
var $sobox = $(".sobox"),
    $fobox = $(".fobox"),
    $current = $("#current"),
    $notcurrent = $("#notcurrent");

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

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

请注意，我个人喜欢使用$符号作为变量名称的一部分，以帮助我记住它是一个jQuery对象，但你不必这样做。

除此之外，我一般认为通过直接添加css规则来改变元素的外观并不是一个好主意。相反，请考虑使用.addClass()和.removeClass()或可能.toggleClass()，具体取决于它是否符合您的最终目标。

我也喜欢使用事件委托而不是直接绑定click事件，但如果你的代码不需要它（没有销毁Ajax或DOM元素），那么就没有必要打扰了。但无论如何都要查找.on()，以便您可以在最新的jQuery中理解事件绑定。

更一般地说：我会考虑将其创建为一个实用功能...而不花时间看看它是什么样的，我可以看到点击功能的全部内容都作为一个单独的可重用代码段运行。但我承认我并没有真正深入研究如何做到这一点。

[编辑：Jashwant也有一个好主意！]

Answer 6

在ipad上键入，抱歉有任何错误;）。假设在加载时显示一个框而且一个不显示，您可以简化此操作。

首先，添加两个CSS类。

.class1 { background:"#9aa0ae"; color:"#fefefe"; }
.class2 { background:"#2568be"; color:"#fff"; }

对于js，只需组合你的处理程序。

<script type="text/javascript"> 

  $(document).ready(function () {
     $(".genre").click(function () {
       $(".sobox, .fobox").fadeToggle(); 
       $("#notcurrent, #current").toggleClass('class1 class2');

     });
  });

</script>

jQuery如何更好地编写代码

6 个答案: