可重复使用的解决方案

Question

我在网页上实现了一些按钮，根据用户点击的按钮显示和隐藏一些文字：

请注意，默认情况下，.reveal-1片段在CSS中设置为display:none。

http://bestclownintown.co.uk/ct/bootstrap-3.3.7/docs/examples/CT_task/index.html

HTML：

  <div class="media">
     <div class="media-left"> <a href="#"> <img alt="New delivery options" class="media-object" src="images/thumbnail-new-delivery-options.jpg"> </a> </div>
     <div class="media-body">
        <h4 class="media-heading">Cotton Traders Introduces New Delivery Options</h4>
        <p class="text-muted">14th January 2016</p>
        <p>Cheshire based retailer, Cotton Traders, has added three new delivery options to its e-commerce offering, in order to improve the customer shopping experience.</p>
        <a class="btn btn-default reveal-button-1" href="#" role="button">Read More <i class="fa fa-caret-down" aria-hidden="true"></i></a>
        <div class="reveal-1">
          <p>The casual clothing retailer now offers its UK customers a choice of standard, next day, Sunday and nominated delivery options.</p>
          <p>With more delivery options to choose from, customers will benefit from this added convenience, allowing them to get their items quicker and at a time that suits them, for as little as £3.99.</p>
          <p>Talking about the introduction, Supply Chain Director, Caroline Allerton, said: "As a company we are constantly striving to improve the offering for our customers and this includes the delivery options.</p>
          <p>"We know that our customers all have busy lives, so the introduction of these options will fit into their schedule and allow them to get their orders when they need them."</p>
          <p>The introduction comes after Cotton Traders launched its dedicated Australian e-commerce website earlier this year.</p>
          <a class="btn btn-default hide-button-1" href="#" role="button">Read Less <i class="fa fa-caret-up" aria-hidden="true"></i></a>
        </div>
     </div>
  </div>

JS：

 $(".reveal-button-1").click(function(){
      $(".reveal-1").show();
  });

  $(".reveal-button-1").click(function(){
      $(".reveal-button-1").hide();
  });

  $(".reveal-button-1").click(function(){
      $(".hide-button-1").show();
  });

  $(".hide-button-1").click(function(){
      $(".reveal-1").hide();
  });

  $(".hide-button-1").click(function(){
      $(".hide-button-1").hide();
  });

  $(".hide-button-1").click(function(){
      $(".reveal-button-1").show();
  });

1）因此，在第一次调用jQuery对象时，我们会在<div>被点击时显示.reveal-1类{/ 1}}

2）然后我们隐藏.reveal-button-1

3）然后，我们会在点击.reveal-button-1时显示.hide-button-1

现在隐藏按钮出现在DOM中。

4）点击.reveal-button-1时，我们会将<div>隐藏为.reveal-1类

5）我们隐藏.hide-button-1

6）最后我们再次展示.hide-button-1。

我是否有任何解决方案可用于重构我的JavaScript，因此我不会经常调用jQuery对象并重复自己这么多次。我知道.reveal-button-1方法，但我不确定它是否可以在这种情况下应用。因为我需要理解jQuery逻辑，请用你的答案给出详尽的解释。我试图保持jQuery逻辑尽可能简单，因为我只是初级。

我目前有4行jQuery代码用于4个HTML片段，看起来相当多，但我不知道是否有更好的方法来实现/优化。

Answer 1

在这里，在任何按钮上单击所有元素可切换可见性。它正是你所需要的。

$(".reveal-button-1, .hide-button-1").click(function(){ //on click of either button.
  $(".reveal-1, .reveal-button-1, .hide-button-1").toggle(); //toggle visibilty on all the corresponding elements
});

确保您的初始值（显示：无）正确。

显示按钮单击将隐藏自身，显示隐藏按钮并切换显示字段（显示）。

因为隐藏按钮现在可见，并且不再显示“显示”按钮。一旦我们点击此按钮，该字段将切换（再次隐藏）。显示按钮将再次可见。

旁注：您可能希望在html中使用更好的css类。（制作更通用的JavaScript代码，以便您可以重复使用其功能）。

可重复使用的解决方案

这是一个可重复使用的版本，有更好的类。

$('.toggle-btn').click(function(){
    $(this).closest('.container').find('.toggle').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="toggle-btn toggle" style="display:none;">show</div>
  <div class="toggle-btn toggle">hide</div>
  <div class="toggle">bla bla</div>
</div>
<div class="container">
  <div class="toggle-btn toggle" style="display:none;">show</div>
  <div class="toggle-btn toggle">hide</div>
  <div class="toggle">bla bla</div>
</div>

说明：单击切换按钮时。它去找并有一个类.container的第一个父。然后从这个父级中，它使用此容器中的.toggle类检查所有html元素，并切换它们的可见性。

关于这个解决方案的旁注：它不是一个非常优秀的解决方案，因为它每次尝试在其父级中找到容器类，然后尝试使用类切换查找所有子级。（更好的是缓存这些类）。但是对于这个简单的解决方案来说并不重要。

开箱即用的库

Answer 2

每个元素只需要一个事件处理程序。像这样重复会导致在每个事件上调用许多额外的函数，这会降低您的网站速度。（可能并不明显，但如果您的网站增长，则可能会出现问题。）

如果您的HTML的每个部分的结构类似，您可以删除特定的类，并继续采用更通用的方法。（为简洁起见缩短。）

<a class="... reveal-button"...>
<div class="reveal">
    ...
    <a class="... hide-button"...>
</div>

然后在JavaScript内部，而不是4组所有的呼叫，你可以只做一个。我会解释这是如何运作的。函数.on()是自jQuery 1.7以来连接事件的首选方法。

$('.reveal-button').on('click', function () { 
    var $self = $(this); // 'this' will be the element that was clicked.
    $self.next('div.reveal')
         .show();
    $self.hide();
});

$('.hide-button').on('click', function () {
    var $parent = $(this).parent(); // refers to div.reveal
    $parent.hide(); // hide the div
    $parent.prev('a.reveal-button').show(); // show the reveal button.
});

重构过度使用简单按钮的jQuery show / hide方法

2 个答案:

可重复使用的解决方案

开箱即用的库