首頁猿問有沒有更有效的方法來做到這一點？

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

JavaScript

忽然笑 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;

}

</div>

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

提交

取消

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

熱搜

最近搜索清空

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

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

3 回答

添加回答