jQuery如何更好地编写代码

如何缩短这段代码，我对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> 

$（文档）.ready（函数（）{
$（“.genre”）。单击（函数（）{
$（“.sobox”）.hide（）；
$（“.fobox”）.fadeIn（）
css（{“背景”：“#9aa0ae”，“颜色”：“#fefefe”}）；
css（{“背景”：“#2568be”，“颜色”：“#fff”}）；
});
$（“.other”）。单击（函数（）{
$（“.fobox”）.hide（）；
$（“.sobox”）.fadeIn（）；
css（{“背景”：“#9aa0ae”，“颜色”：“#fefefe”}）；
css（{“背景”：“#2568be”，“颜色”：“#fff”}）；
});
});

注释中的格式不好，因此将其粘贴到此处。

我认为这个代码很好。没什么不对的。 你可以试试

$(".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"}); 
       }   
  });

---

指出您可以选择多个类。因此您需要进行处理。

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

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

i、 e.假设在第一个事件处理程序中，您打算更改

#notcurrent

元素的样式，而不是另一个

#nccurrent

，并且在初始加载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>

$（文档）.ready（函数（）{
var styleA={“背景”：“#9aa0ae”，“颜色”：“#fefefe”}，
styleB={“背景”：“#2568be”，“颜色”：“#fff”}，
当前=$（“#当前”），
notCurrent=$（“#notCurrent”），
fobox=$（“.fobox”），
sobox=$（“.sobox”）；
$（“.genre”）。单击（函数（）{
sobox.hide（）；
fobox.fadeIn（）
css（styleA）；
current.css（styleB）；
});
$（“.other”）。单击（函数（）{
fobox.hide（）；
sobox.fadeIn（）；
current.css（styleA）；
notCurrent.css（styleB）；
});
});

---

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

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

这是一个复杂的问题，因为我们只能猜测代码的意图。在不推荐其他方法的情况下，最好缓存多次使用的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规则来改变元素的外观不是一个好主意。取而代之的是，考虑使用<代码> .AdCase>和<代码> .ReaveCysAs>>（）/<代码>或可能<代码> .ToGLCGLASS（）/<代码>，取决于它是否满足您的最终目标。

我也喜欢使用事件委派而不是直接绑定单击事件，但是如果您的代码不需要它（没有破坏Ajax或DOM元素），那么就不需要麻烦了。但无论如何都要查找

.on（）

，以便了解最新jQuery中的事件绑定

更一般地说：我会考虑将此作为实用函数来创建。不必花时间讨论它的外观，我可以看到click函数的全部内容都作为一段单独的可重用代码运行。但我承认我并没有深入思考如何做到这一点

---

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

我认为您的代码很好

但是，既然您提出了要求，另一种方法是在样式表中定义一些类，而不是直接在JavaScript中编码CSS属性，然后您可以通过使用jQuery的和方法来整理JS：

---

最初，您需要指定一个或另一个

sobox

或

fobox

类，以

display:none

开头，并为“notcurrent”和“current”元素分别指定“class1”和“class2”，如本工作演示所示：（显然，您会得到比我的“class1”更有意义的类名）和“class2”…）

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

$（文档）.ready（函数（）{
$（“.genre”）。单击（函数（）{
$（“.sobox，.fobox”）.fadeToggle（）；
$（“#非当前，#当前”）.toggleClass（'class1 class2'）；
     });
  });

你的意思是如何减少js的大小吗？不，让它变得更短更好。我认为你的代码很好，但在答案中使用@rrr的方式是非常好和干净的。这不会总是以相同的方式设置当前CSS样式，而不是交替使用它们吗？@rrr感谢你指出这一点。DonVitto，正如我提到的，你的代码很好，没有任何错误。我只是展示了一种不同的方法。代码不正确。失踪）。另外，hasClass返回一个布尔值，因此

if（$（this）.hasClass（'genre'）{

应该是

if（$（this）.hasClass（'genre'）==true）{

。但是代码很棒。@Shawn31313 yes'）'丢失了。我已经更正了。但是您不需要检查它是否为真。正如您所说，hasClass返回一个布尔值，而'if'需要一个布尔值才能工作；那么为什么要用==真进行双重检查呢？我喜欢双重检查，只是为了看一看。这不起作用，我想我会保留我的，因为ide

<script type="text/javascript"> 

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

     });
  });

</script>