添加和删除代码行较少的类

Question

我正在努力学习如何缩短我的jQuery代码。任何建议或建议都是很棒的：

jQuery(document).ready(function($){ 

  $('#checkout_timeline #timeline-4').click(function() {
    if ($('#checkout_timeline #timeline-4').hasClass('active')) {
      $('#checkout-payment-container').addClass('cpc-visible');
    } 
  });

  $('#checkout_timeline #timeline-1, #checkout_timeline #timeline-2, #checkout_timeline #timeline-3').click(function() {
    $('#checkout-payment-container').removeClass('cpc-visible');
  });

});

为了避免混乱，请在这里找到工作版本：我的JSFiddle代码

我知道我可以使用.show()和.hide()，但是由于其他的CSS考虑，我想应用.cpc-visible。

Answer 1

这里有一些你可以改进的地方。首先，你说得太多了。身份证是独一无二的。不需要选择#checkout_timeline #timeline-4，只要#timeline-4就行了。但是为什么每个li都有ids呢？您可以使用:nth-child(n)选择器按数字引用它们。或者更好的是，您已经给它们指定了特定于应用程序的类名，如billing、shipment和payment。用那些！让我们将原始内容简化为：

<ul id="checkout_timeline">
  <li class='billing'>Billing</li>
  <li class='shipping'>Shipping</li>
  <li class='confirm'>Confirm</li>
  <li class='payment active'>Payment</li>
</ul>

<div id='checkout-payment-container' class='cpc-visible'>
  This is the container to show and hide.
</div>

注意，我离开了active类，并使用cpc-visible进一步初始化了签出div，以反映支付处于活动状态。通常，我会保持HTML尽可能简单，并在代码中放置“起始位置”初始化。但是“为了一分钱，一英镑”如果我们从支付活动开始，那么最好通过这个决定，并以一致的状态启动依赖的div。

现在，修改后的JavaScript：

jQuery(document).ready(function($) { 
  $('#checkout_timeline li').click(function() {
    // make clicked pane active, and the others not
    $('#checkout_timeline li').removeClass('active');
    $(this).addClass('active');

    // show payment container only if payment pane active
    var paymentActive = $(this).hasClass('payment');
    $('#checkout-payment-container').toggleClass('cpc-visible', paymentActive);
  });
});

此代码更不特定于项。它不尝试为不同的选项卡/窗格添加单独的单击处理程序。他们都有相同的处理程序，这就做出了一组统一的决策。首先，单击哪个窗格，使其处于活动状态，而其他窗格不处于活动状态。它通过移除所有active类，然后将active放在当前选定的窗格中来实现这一点。第二，它问“当前窗格是支付窗格吗？”并使用toggleClass API相应地设置cpc-visible类。通常，这种“基于布尔条件的set类”逻辑比尝试对适当的addClass和removeClass调用更简单和更可靠。

我们就完蛋了。下面是一个JSFiddle，它显示了这一点。

Answer 2

尝试如下:您可以用timeline和active类使用jquery选择器绑定单击事件处理程序，在其中可以添加所需的类。相同的选择器，但没有active类来删除类。

当您添加/删除元素时，这将是非常有用的，并且会更加灵活。

jQuery(document).ready(function($){ 
  $('#checkout_timeline .timeline.active').click(function() {
      $('#checkout-payment-container').addClass('cpc-visible');
  });
  $('#checkout_timeline .timeline:not(.active)').click(function() {
     $('#checkout-payment-container').removeClass('cpc-visible');
  });
});

JSFIddle

Answer 3

以下是使用:not()缩短这段代码的方法之一。另外，使用元素比引用元素更好，并且总是通过JQuery获取它们。

​

jQuery(document).ready(function($) {
  var showHideContainer = $('#checkout-payment-container');
  $('#checkout_timeline .timeline.active').click(function() {
    showHideContainer.addClass('cpc-visible');
  });

  $('#checkout_timeline .timeline:not(.payment)').click(function() {
    showHideContainer.removeClass('cpc-visible');
  });

});

​