重构 jQuery $(this).find

Question

我写了一个简单的手风琴脚本，效果很好，我只是想重构它以摆脱多个 `$(this).find。

我知道它确实很苗条，但我讨厌重复自己的话，有什么想法吗？我想最好的学习方法就是问。

谢谢！

$.fn.acAccordion = function () {
   $(this).find(".accordion-toggle .acc-state").show();
   $(this).find(".accordion-content").hide();
   $(this).find(".show").show();
  $(this).find(".show").next().show();
  $(this).find('.accordion-toggle').click(function(){
    if($(this).next().is(":hidden")) {
              $(this).next().slideToggle('fast');
    $(".accordion-content").not($(this).next()).slideUp('fast');
  }
});
};

$(".accordion").acAccordion();

body {
font-size:16px;
font-family:sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="accordion">
  <div class="accordion-toggle show"><span class="accordion-title">Accordion 1</span></div>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <div class="accordion-toggle"><span class="accordion-title">Accordion 2</span></div>
  <div class="accordion-content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </p>
  </div>
  <div class="accordion-toggle"><span class="accordion-title">Accordion 3</span></div>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

Answer 1

您可以缓存重复元素作为开始。您也可以在同一元素上链接调用：

$.fn.acAccordion = function () {
  var $el = $(this),
    $contents = $el.find('.accordion-content');

  $contents.hide().first().show();

  $el.find('.accordion-toggle').click(function(){
    var $next = $(this).next();

    if ($next.is(":hidden")) {
       $next.slideToggle('fast');
       $contents.not($next).slideUp('fast');
    }
  });
};

$(".accordion").acAccordion();

body {
font-size:16px;
font-family:sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="accordion">
  <div class="accordion-toggle show"><span class="accordion-title">Accordion 1</span></div>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <div class="accordion-toggle"><span class="accordion-title">Accordion 2</span></div>
  <div class="accordion-content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </p>
  </div>
  <div class="accordion-toggle"><span class="accordion-title">Accordion 3</span></div>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

Answer 2

这个怎么样：

https://jsfiddle.net/n2hdkede/

$(function(){

    $.fn.acAccordion = function () {
         $(".accordion-title")
         .on("click", function(e){
             $(".accordion-content:visible").slideUp("fast");
             $(e.target).parent()
             .next().slideDown();            
         });
    }
    $(".accordion").acAccordion();

});

隐藏任何可见的 .accordion-content div

Answer 3

我链接了调用，删除了多余的检查和调用，恢复了操作顺序

$.fn.acAccordion = function () {
  $(this).find('.accordion-toggle')
    .click(function() {
      $(this)
        .next().slideDown('fast')
        .siblings('.accordion-content').slideUp('fast');
    })
    .not('.show').next().hide();    
};

$(".accordion").acAccordion();

body {
font-size:16px;
font-family:sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="accordion">
  <div class="accordion-toggle show"><span class="accordion-title">Accordion 1</span></div>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <div class="accordion-toggle"><span class="accordion-title">Accordion 2</span></div>
  <div class="accordion-content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </p>
  </div>
  <div class="accordion-toggle"><span class="accordion-title">Accordion 3</span></div>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

重构 jQuery $(this).find

Refactor jQuery $(this).find

javascript

jquery

refactoring