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

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>

标签： javascriptjqueryperformanceoptimization

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>

参考：

• click().
• next().
• slideToggle().