使用更少的代码行添加和删除类

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

试试这个：您可以使用 jquery 选择器与 timeline 和 active class 绑定单击事件处理程序，您可以在其中添加所需的 class。相同的选择器，但没有 active class 来删除 class.

这在您添加/删除元素时会很有用，并且会更加灵活。

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 2

这是其中一种方法，您可以使用 :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 3

试试这个代码，它与 fiddle

一起工作正常

   $('.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 4

这将是我的方法，因为您仍然需要 add/remove 在每个 li 之间激活 class。

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 5

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

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

Link 举个例子： jsFiddle

Answer 6

这里有一些您可以改进的地方。首先，你过度指定了。 ID 是唯一的。不需要 select #checkout_timeline #timeline-4 当 #timeline-4 就可以了。但为什么每个 li 都有 ID？您可以使用 :nth-child(n) select 或按编号引用它们。或者更好的是，您已经为它们指定了特定于应用程序的 class 名称，例如 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>

注意我离开了activeclass，确实进一步初始化了结帐 div 和 cpc-visible 以反映付款已激活的情况。通常我会保持 HTML 尽可能简单，并将 "starting positions" 初始化放在代码中。但是 "in for a penny, in for a pound." 如果我们从付款活动开始，不妨通过该决定，并以一致的状态启动相关 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);
  });
});

此代码不太特定于项目。它不会尝试为不同的 tabs/panes 添加单独的点击处理程序。他们都得到相同的处理程序，从而做出一组统一的决定。首先，无论单击哪个窗格，都将其激活，而其他窗格则不激活。它通过删除所有 active classes，然后将 active 放在当前 selected 窗格上来实现。其次，它询问 "is the current pane the payment pane?" 并使用 toggleClass API 相应地设置 cpc-visible class。通常这样的 "set class based on a boolean condition" 逻辑比尝试配对适当的 addClass 和 removeClass 调用更简单、更可靠。

我们完成了。 a JSFiddle 展示了这一点。

使用更少的代码行添加和删除类

Add & remove classes with fewer lines of code

javascript

jquery

jquery-selectors

使用更少的代码行添加和删除 类

Add & remove classes with fewer lines of code

javascript

jquery

jquery-selectors

使用更少的代码行添加和删除类