亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

有沒有更有效的方法來做到這一點?

有沒有更有效的方法來做到這一點?

忽然笑 2023-02-17 10:18:25
我怎樣才能更輕松地或使用更少的代碼行來實現此代碼?我很好奇它是否可以更容易和/或更有效地完成。因為我覺得這里面重復的太多了,所以一定有一個簡單的方法。而且我不僅計劃制作其中的 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>
查看完整描述

3 回答

?
繁花不似錦

TA貢獻1851條經驗 獲得超4個贊

鑒于您的 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>


查看完整回答
反對 回復 2023-02-17
?
人到中年有點甜

TA貢獻1895條經驗 獲得超7個贊

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


查看完整回答
反對 回復 2023-02-17
?
慕森王

TA貢獻1777條經驗 獲得超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"))

要了解有關此原理的更多信息,請搜索“高階函數”和“閉包”


查看完整回答
反對 回復 2023-02-17
  • 3 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號