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');
  });

});

为避免混乱，请在此处找到工作版本： My JSFiddle Code

我知道我可以使用.show()和.hide()，但由于其他CSS注意事项，我想应用.cpc-visible。

Answer 1

这里有一些你可以改进的东西。首先，你过度指定了。 Ids是独一无二的。只有#checkout_timeline #timeline-4才会选择#timeline-4。但是为什么每个li都有id？您可以使用: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并放置＆＃34;起始位置＆＃34;在代码中初始化。但是，为了一分钱，一分钱。＆＃34;如果我们从付款激活开始，也可以看到该决定，并以一致的状态启动依赖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放在当前选定的窗格上来完成此操作。其次，它询问＆＃34;当前窗格是支付窗格？＆＃34;它使用toggleClass API相应地设置cpc-visible类。通常这样的＆＃34;基于布尔条件设置类＆＃34;逻辑比尝试配对适当的addClass和removeClass调用更简单，更可靠。

我们已经完成了。这里的a JSFiddle显示了这一点。

Answer 2

试试这个：您可以使用timeline和active类来使用jquery选择器来绑定click事件处理程序，您可以在其中添加所需的类。相同的选择器，但没有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');
  });

});

Answer 4

尝试使用此代码，小提琴正常工作

   $('.timeline').click(function() {
        if ($(this).hasClass('active') && $(this).attr("id") == "timeline-4")
          $('#checkout-payment-container').addClass('cpc-visible');
        else
         $('#checkout-payment-container').removeClass('cpc-visible');
      });

Answer 5

这是我的方法，因为你仍然需要在每个li之间添加/删除活动类。

jQuery(document).ready(function($) {

  $('ul li').click(function() {
    $('ul li.active').removeClass('active');
    $(this).closest('li').addClass('active');

    k();
  });

  var k = (function() {
    return $('#timeline-4').hasClass('active') ? $('#checkout-payment-container').addClass('cpc-visible') : $('#checkout-payment-container').removeClass('cpc-visible');
  });

});

#checkout-payment-container {
  float: left;
  display: none;
  background: red;
  color: white;
  height: 300px;
  width: 305px;
  padding: 5px;
}

ul {
  list-style: none;
  width: 100%;
  padding: 0 0 20px 0px;
}

li {
  float: left;
  padding: 5px 11px;
  margin-right: 5px;
  background: gray;
  color: white;
  cursor: pointer;
}

li.active {
  background: black;
}

.cpc-visible {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="checkout_timeline">
  <li id='timeline-1' class='timeline billing'>Billing</li>
  <li id='timeline-2' class='timeline shipping'>Shipping</li>
  <li id='timeline-3' class='timeline confirm'>Confirm</li>
  <li id='timeline-4' class='timeline payment'>Payment</li>
</ul>


<div id='checkout-payment-container'>
  This is the container to show and hide.
</div>

Answer 6

你的代码看起来很棒，我会写得一样。确定它有多大帮助，但如果你愿意，可以像这样使用内联：

$(document).ready(function(){ 
  $('#B').click(function() { (!$('#B').hasClass('active')) ? 
  $('#A').addClass('active') : ''; });          
  $('#C').click(function() { $('#A').removeClass('active'); });
});

直播示例的链接： jsFiddle

添加＆amp;删除具有较少代码行的类

6 个答案: