有没有更有效的方法来做到这一点？

Question

我怎样才能更轻松地或使用更少的代码行来实现此代码？我很好奇它是否可以更容易和/或更有效地完成。因为我觉得这里面重复的太多了，所以一定有一个简单的方法。而且我不仅计划制作其中的 4 个，而且还打算制作 20-30 个，因此性能是一个关键方面。查询：$( document ).ready(function() {        $( "#q1" ).click(function() {            $( "#a1" ).slideToggle( "slow", function() {});            if ($(this).hasClass('on')){                    $(this).removeClass('on');            }else{                $(this).addClass('on');            }        });        $( "#q2" ).click(function() {            $( "#a2" ).slideToggle( "slow", function() {});            if ($(this).hasClass('on')){                    $(this).removeClass('on');            }else{                $(this).addClass('on');            }        });        $( "#q3" ).click(function() {            $( "#a3" ).slideToggle( "slow", function() {});            if ($(this).hasClass('on')){                    $(this).removeClass('on');            }else{                $(this).addClass('on');            }        });        $( "#q4" ).click(function() {            $( "#a4" ).slideToggle( "slow", function() {});            if ($(this).hasClass('on')){                    $(this).removeClass('on');            }else{                $(this).addClass('on');            }        });    });HTML:<div id="faq_content">  <div class="faq_box">    <div class="questions" id="q1">      <span>xyz</span>    </div>    <div class="answers" id="a1">      <span>xyz</span>    </div>  </div>  <div class="faq_box">    <div class="questions" id="q2">      <span>xyz</span>    </div>    <div class="answers" id="a2">      <span>xyz</span>    </div>  </div></div>

Answer 1

鉴于您的 HTML 结构，我能想到的最简单的方法如下：

$(document).ready(function() {

  // selecting all the elements you need to work with,

  // and binding the anonymous function of the click()

  // method as the event-handler:

  $("#q1, #q2").click(function() {

    // here $(this) will refer to the element that fired the

    // click event, from that element:

    $(this)

      // we navigate to the next-sibling element matching the

      // supplied selector:

      .next('.answers')

      // we use the slideToggle() method to show/hide the element,

      // using an Arrow function to compose the anonymous

      // function so that we can use the same this (and therefore

      // $(this)) as the outer function:

      .slideToggle('slow', () => {

        // here $(this) still refers to the clicked element, as

        // Arrow functions don't establish their own 'this'; and

        // we use the toggleClass() method to add, or remove, the

        // supplied class based on whether it already exists on

        // the element:

        $(this).toggleClass('on');

    });

  // here we again call the click() method, without arguments, in

  // order to fire the click event on page-load (which, in this

  // context will cause the answers to be hidden on page-load):

  }).click();

});

$(document).ready(function() {

  $("#q1, #q2").click(function() {

    $(this).next('.answers').slideToggle('slow', () => {

      $(this).toggleClass('on');

    });

  }).click();

});

*,

 ::before,

 ::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

.faq_box {

  border: 1px solid #000;

  margin: 0.2em auto;

  width: 80vw;

}

.questions {

  background-color: #ffff;

  border: 1px solid transparent;

  border-bottom-color: #000;

  cursor: pointer;

  font-size: 1.2em;

  font-weight: bold;

  transition: background-color 0.3s linear;

}

.questions::before {

  content: attr(id) ': ';

  text-transform: capitalize;

}

.answers::before {

  content: attr(id) ': ';

}

.on {

  background-color: #0f06;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="faq_content">

  <div class="faq_box">

    <div class="questions" id="q1">

      <span>xyz</span>

    </div>

    <div class="answers" id="a1">

      <span>xyz</span>

    </div>

  </div>

  <div class="faq_box">

    <div class="questions" id="q2">

      <span>xyz</span>

    </div>

    <div class="answers" id="a2">

      <span>xyz</span>

    </div>

  </div>

</div>

Answer 2

$(document).ready(function(){

    var qClasses = $('.q');

    

    qClasses.on('click', function(){

        var $this = $(this);

        var aIds =  $this.data('id');

        $(aIds).slideToggle("slow");

        $this.toggleClass("on");

    });

});

由于所有#q1、#q2...都在点击时做同样的事情，您可以为此使用这些类，并且<div id="#q1" class="q" data-id="#a1" ></div>您可以在点击 q 类时参考 id。此外，您可以定义#q1 或 q 类的初始状态，因为只有两种状态带有类“on”或没有它，因此默认状态可以直接在 HTML 中定义，而不是在 JS 中检查。喜欢：<div id="#q1" class="q on" data-id="#a1"></div>

Answer 3

因为你所有的处理程序看起来都一样，你可以创建一个返回函数的函数：

  function createHandler(selector) {

     return function() {

            $( selector ).slideToggle( "slow", function() {});

            if ($(this).hasClass('on')){

                    $(this).removeClass('on');

            }else{

                $(this).addClass('on');

            }

        }

  }

并像这样使用它：

   $( "#q1" ).click(createHandler("#a1"))

要了解有关此原理的更多信息，请搜索“高阶函数”和“闭包”