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

我锁定了电话，删除了多余的支票和电话，恢复了行动顺序

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

$.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 3

这个怎么样：

https://jsfiddle.net/n2hdkede/

<ion-modal-view> 
    <ion-header-bar>
        <h1 class="title">Item Details</h1>
    </ion-header-bar>
    <ion-content padding="true">
        <form ng-submit="addItem()">
            <div class="list list-inset">
                <label class="item item-input">
                    <span class="input-label">Name</span>
                    <input type="text" name="name" ng-model="name">
                </label>
                <label class="item item-input">
                    <span class="input-label">Qty</span>
                    <input type="number" name="qty" ng-model="qty">
                </label>
                <div class="padding item text-center">
                    <button class="button button-dark">Add To Cart</button>
                    <a class="button  button-assertive" ng-click="closeModal()">Cancel</a>            
                </div>
            </div>
        </form>
    </ion-content>
</ion-modal-view>

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

重构jQuery $（this）.find

3 个答案: