首頁(yè) 猿問為什么我的課程沒有在單擊按鈕時(shí)添加？

為什么我的課程沒有在單擊按鈕時(shí)添加？

JavaScript

楊魅力 2023-08-18 14:21:48

我不是最擅長(zhǎng) JavaScript，但希望有人可以幫助我。我想要的是，當(dāng)您按下其中一個(gè)按鈕時(shí)，該按鈕會(huì)打開該類的 div。我有多個(gè)按鈕，所以我的意思是單擊按鈕，按鈕為 content1 打開類，當(dāng)您按下其他按鈕之一時(shí)，該 div 的類將被分配到該按鈕鏈接的另一個(gè) div 上至等等。我現(xiàn)在得到的是所有開放的 div 都留在班級(jí)中并且沒有被刪除。我嘗試過多種方法，例如在谷歌上搜索或使用其他技術(shù)，但沒有任何效果。const content1 = document.querySelector('.content1');const content2 = document.querySelector('.content2');const content3 = document.querySelector('.content3');var dn = document.querySelector('.dn');const one = document.querySelector('.one');const two = document.querySelector('.two');const three = document.querySelector('.three');one.addEventListener('click', () => { if (dn.classList.contains('open')) { dn.classList.remove('open'); } else { content1.classList.add('open'); }})two.addEventListener('click', () => { if (dn.classList.contains('open')) { dn.classList.remove('open'); } else { content2.classList.add('open'); }})three.addEventListener('click', () => { if (dn.classList.contains('open')) { dn.classList.remove('open'); } else { content3.classList.add('open'); }}).dn { display: none;}.open { display: block;}<div id="mainBOX" class="mainBOX"> <button class="btn one">btn1</button> <button class="btn two">btn2</button> <button class="btn three">btn3</button> <div class="dn content1"> <h1>Lorem Ipsum</h1> </div> <div class="dn content2"> <h1>Lorem Ipsum2</h1> </div> <div class="dn content3"> <h1>Lorem Ipsum3</h1> </div></div>

查看完整描述

5 回答

哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

如果您試圖確保當(dāng)前單擊的項(xiàng)目變?yōu)榇蜷_狀態(tài)，則需要首先確保關(guān)閉所有匹配的現(xiàn)有元素.dn。您的代碼僅解決第一個(gè)問題。

您的代碼從未open從任何 div 中刪除。

最后，有兩件事將極大地改進(jìn)你的代碼：

事件委托：這樣您只需要一個(gè)處理程序
使用數(shù)據(jù)屬性將按鈕與其 div 相關(guān)聯(lián)（其他人建議使用索引，這是可以的，但大多數(shù)人嘗試遠(yuǎn)離并行數(shù)組）

document.getElementById('mainBOX').addEventListener('click', (e)=> {

// Ignore clicks not on buttons

if (e.target.tagName !== 'BUTTON') {

return;

}

// Close all divs

Array.from(document.querySelectorAll('.dn')).forEach(

dn => dn.classList.remove('open')

);

// Open the current one

document.querySelector('.' + e.target.dataset.for).classList.add('open');

});

.dn {

display: none;

}

.open {

display: block;

}

<h1>Lorem Ipsum</h1>

</div>

<h1>Lorem Ipsum2</h1>

</div>

<h1>Lorem Ipsum3</h1>

</div>

反對(duì) 回復(fù) 2023-08-18

UYOU

TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊

我只是通過索引來定位你的 div：

$('.btn').click(function() {

// get the zero-based index of the clicked element

let index = $(this).index();

// hide all divs inside the container and remove the 'open' class

$('#mainBOX div').hide().removeClass('open');

// show just the div with the right index and add the 'open' class

$('#mainBOX div').eq(index).show().addClass('open');

});

.dn {

display: none;

}

<script

src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="

crossorigin="anonymous"></script>

<h1>Lorem Ipsum</h1>

</div>

<h1>Lorem Ipsum2</h1>

</div>

<h1>Lorem Ipsum3</h1>

</div>

總結(jié)一下：

使用 DOM 遍歷來定位元素而不是特定的類名
使用類名來標(biāo)識(shí)相似元素的集合
不必費(fèi)心使用類來切換可見性（除非您想要精致的動(dòng)畫）
如果使用 jQuery，請(qǐng)熟悉它提供的常用方法，這樣您就不會(huì)重新發(fā)明輪子
不必將開放類和非開放類分開，只需將其中一個(gè)設(shè)為默認(rèn)并應(yīng)用另一個(gè)即可
不要在代碼中重復(fù)自己

反對(duì) 回復(fù) 2023-08-18

叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊

我已經(jīng)使用forEach()方法和toggle()每個(gè)內(nèi)容的方法縮短了您的代碼。

有必要嗎？

const btn = document.querySelectorAll('.btn');

const content = document.querySelectorAll('.dn');

Array.from(btn).forEach(function(btnArray, i) {

btnArray.addEventListener('click', function() {

content[i].classList.toggle('open');

});

.dn {

display: none;

}

.open {

display: block;

}

<h1>Lorem Ipsum</h1>

</div>

<h1>Lorem Ipsum2</h1>

</div>

<h1>Lorem Ipsum3</h1>

</div>

反對(duì) 回復(fù) 2023-08-18

慕碼人8056858

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超6個(gè)贊

看看這個(gè)。使用 forEach 函數(shù)處理具有特定類的所有按鈕中的單擊事件

<!DOCTYPE html>

<html>

<head>

<style>

.dn {

display: none;

}

.btn {

margin-right: 10px;

}

.open {

display: block;

}

</style>

</head>

<body>

<h1>Content 1</h1>

</div>

<h1>Content 2</h1>

</div>

<h1>Content 3</h1>

</div>

<button id="btn1" class="action-btn">Button 1</button>

<button id="btn2" class="action-btn">Button 2</button>

<button id="btn3" class="action-btn">Button 3</button>

<button id="clean" class="action-btn">Limpiar</button>

const buttons = document.querySelectorAll(".action-btn");

const contents = document.querySelectorAll(".content");

buttons.forEach(function (item) {

item.addEventListener("click", function (e) {

if (item.id === "clean") {

contents.forEach((item) => item.classList.remove("open")); // Clean all the open classes

} else {

contents.forEach((item) => item.classList.remove("open"));

switch (item.id) {

case "btn1":

const c1 = document.getElementById("c1");

if (!c1.classList.contains("open")) {

c1.classList += " open";

}

break;

case "btn2":

const c2 = document.getElementById("c2");

if (!c2.classList.contains("open")) {

c2.classList += " open";

}

break;

case "btn3":

const c3 = document.getElementById("c3");

if (!c3.classList.contains("open")) {

c3.classList += " open";

}

break;

}

});

</script>

</body>

</html>

反對(duì) 回復(fù) 2023-08-18

慕尼黑的夜晚無繁華

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊

好吧，我從頭開始重寫了我的貢獻(xiàn)，因?yàn)槲乙婚_始沒有正確閱讀 OP 需求。

毫無疑問，@isherwood 的答案應(yīng)該是這里可接受的答案，因?yàn)樗褂昧藛螕舭粹o的索引，并且因?yàn)樗褂昧?jQuery，這使得腳本更容易閱讀！

然而，在我的貢獻(xiàn)中，我想表明，即使沒有 jQuery，同樣的事情也是可能的。誠(chéng)然，事情變得有點(diǎn)復(fù)雜：

整個(gè)操作發(fā)生在 IIFE ( (function(){...})()) 內(nèi)，以保持全局名稱空間干凈。mBox是#mainBox我為所有 s 附加委托單擊事件的 DOM 元素BUTTON。

mBox每次觸發(fā)單擊事件處理程序時(shí)，它都會(huì)收集數(shù)組中的所有按鈕btns（該[...mBox.SelectorAll()]構(gòu)造對(duì)于從返回的集合創(chuàng)建 JavaScript 數(shù)組是必需的.querySelectorAll()）。

odiv是先前操作中（可能）打開的 div，需要通過open從中刪除類來再次關(guān)閉。

最終該類open被添加到div與行中單擊的按鈕具有相同索引的位置

mBox.querySelectorAll('div')[btns.indexOf(ev.target)].classList.add('open');

通過使用委托事件偵聽并在每次單擊后檢查可用的buttons 和divs ，可以動(dòng)態(tài)地將按鈕和 div 添加到頁(yè)面，而無需將事件偵聽器附加到這些元素。

(function(){

const mBox=document.getElementById('mainBOX');

mBox.onclick=ev=>{

const btns=[...mBox.querySelectorAll('button')];

if (ev.target.tagName=="BUTTON"){

let odiv=mBox.querySelector('div .open')

if (odiv) odiv.classList.remove('open');

mBox.querySelectorAll('div')[btns.indexOf(ev.target)].classList.add('open');

}

})()

.dn { display: none; }

.open { display: block;}

<button class="btn one">first </button>

<button class="btn two">second</button>

<button class="btn three">third</button>

<button class="btn four">fourth</button>

<button class="btn five">fifth</button>

<button class="btn six">sixth</button>

<button class="btn seven">seventh</button>

<button class="btn eight">eighth</button>

<button class="btn nine">nineth</button>

<button class="btn ten">tenth</button>

<h1>Lorem Ipsum</h1>

</div>

<h1>Lorem Ipsum2</h1>

</div>

<h1>Lorem Ipsum3</h1>

</div>

<h1>Lorem Ipsum4</h1>

</div>

<h1>Lorem Ipsum5</h1>

</div>

<h1>Lorem Ipsum6</h1>

</div>

<h1>Lorem Ipsum7</h1>

</div>

<h1>Lorem Ipsum8</h1>

</div>

<h1>Lorem Ipsum9</h1>

</div>

<h1>Lorem Ipsum10</h1>

</div>

反對(duì) 回復(fù) 2023-08-18

5 回答
0 關(guān)注
203 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

為什么我的課程沒有在單擊按鈕時(shí)添加？

為什么我的課程沒有在單擊按鈕時(shí)添加？

5 回答

添加回答

為什么我的課程沒有在單擊按鈕時(shí)添加？

為什么我的課程沒有在單擊按鈕時(shí)添加？