我想在單擊另一個元素時在具有相同類的所有元素上切換一個 css 類。
我讓它與 jQuery 一起作業，但需要切換到純 JavaScript。
有效的 jQuery 版本：
$(function() {
$("#logo").click(function() {
$(".grey").toggleClass("white", 1000);
$(".red").toggleClass("orange", 1000);
});
});
當您單擊帶有 的元素時id="logo"，所有帶有切換white類的內容和所有帶有切換的內容orange。
uj5u.com熱心網友回復：
首先抓住“id”。然后聽那個“點擊”事件。當點擊發生時，首先抓取所有“白色”類元素。“queryselectorAll”回傳一個類似陣列的NodeList，所以你可以使用“forEach”陣列方法。然后一一迭代所有元素。同樣的邏輯也適用于“紅色”類元素。
let logo = document.getElementById('logo');
logo.addEventListener('click', ()=>{
let grey = document.querySelectorAll('.grey');
grey.forEach((e)=>{
e.classList.toggle('white')
})
let red = document.querySelectorAll('.red');
red.forEach((e)=>{
e.classList.toggle('orange')
})
})
uj5u.com熱心網友回復：
首先，logo通過其id屬性選擇元素。click在其上注冊一個事件偵聽器以觸發該程序。事件處理函式將選擇所有包含grey&red類名的元素，生成一個節點串列，遍歷它們，并為每個元素，在類串列中切換white&orange類名。
const logo = document.getElementById('logo');
logo.addEventListener('click', () => {
const grey = document.querySelectorAll('.grey');
const red = document.querySelectorAll('.red');
grey.forEach(e => e.classList.toggle('white'));
red.forEach(e => e.classList.toggle('orange'));
}, false);body {
background-color: #666;
}
.grey {
color: #bbb;
}
.red {
color: red;
}
.white {
color: white;
}
.orange {
color: orange;
}<button id="logo">LOGO!</button>
<p class="grey">Hello World</p>
<p class="red">Hello World</p>
<p class="grey">Hello World</p>
<p class="red">Hello World</p>
<p class="grey">Hello World</p>我希望這能解決你的問題。
uj5u.com熱心網友回復：
您可以通過其類獲取一個元素，然后對其進行操作：
document.getElementById('logo').addEventListener('click', function(){
var redElements = document.getElementsByClassName('red');
Array.from(redElements).forEach(el => el.classList.toggle('orange'));
var greyElements = document.getElementsByClassName('grey');
Array.from(greyElements).forEach(el => el.classList.toggle('white'));
});
uj5u.com熱心網友回復：
您的代碼帶有轉換為純 js 的注釋：
$(function() // not even necessary in jQuery
$("#logo").click(function() {
// **replace with
document.querySelector(`#logo`).addEventListener(`click`, /*[you handler function]*/)
// your handler function
function myLogoHandler() {
$(".grey").toggleClass("white", 1000);
// ^ invalid/unnecessary parameter
// **replace with
document.querySelectorAll(`.grey`).forEach(el => el.classList.toggle(`white`));
/* ... etc */
}
有幾種方法可以處理這種“切換”。下面是兩個使用classList.replace. 片段使用事件委托。有關 -...語法，請參閱MDN。
為什么
replace？在所有.grey元素的代碼中，您最終會得到<[element] >或<[element] >。這是令人困惑的，并可能導致無法預料的副作用（例如矛盾的 css 值）。為什么
event delegation？在這種情況下，它可能看起來有點矯枉過正，但對于動態網頁來說，這是一種處理動態創建的元素而無需重新分配處理程式的方法，可以用更少的（處理）代碼做更多的事情并提高性能。
document.addEventListener(`click`, handle);
function handle(evt) {
// if the click originated from the button
if (evt.target.id === `toggle`) {
// find all elements with className green or red
document.querySelectorAll(`.green, .red`)
.forEach(el => {
// create parameters for the replace
// if current is red then red should be replaced by green
// otherwise green should be replaced by red
const colors = el.classList.contains(`red`)
? [`red`, `green`] : [`green`, `red`];
el.classList.replace(...colors);
// ^ spread the array into variables
})
}
}.green:before {
content: 'Green';
color: green;
}
.red:before {
content: 'Red';
color: red;
}<div class="green"></div>
<div class="green"></div>
<div class="red"></div>
<div class="red"></div>
<button id="toggle">toggle color</button>使用資料屬性為類名添加更多靈活性以進行切換。
顯示代碼片段
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.id === `toggle`) {
// find all elements with the data-colors attribute
document.querySelectorAll(`[data-colors]`)
.forEach(el => {
// convert the data-colors value to array
const colors = el.dataset.colors.split(`,`);
el.classList.replace(...colors);
// swap the colors.
el.dataset.colors = colors.reverse();
// ^ note:
// the array is automatically converted
// to a string here
})
}
}.green:before {
content: 'Green';
color: green;
}
.red:before {
content: 'Red';
color: red;
}
.orange:before {
content: 'Orange';
color: orange;
}<div class="green" data-colors="green,orange"></div>
<div class="red" data-colors="red,green"></div>
<div class="orange" data-colors="orange,red"></div>
<button id="toggle">toggle color</button>uj5u.com熱心網友回復：
javascript 的簡化是 jquery，所以不需要用困難的方式來做朋友。
var grey = document.getElementByClassName("grey");
grey.classList.toggle("white");
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407062.html
標籤：