https://prnt.sc/21vc411 正如您在鏈接中看到的，當我單擊左側或右側的一個字母時，該字母應該會消失，并應該轉到另一側。例如，當我單擊左側的“A”字母時，它會向右移動。我在每一側創建了一個字母，默認情況下，右側的顯示為“無”。所以當我點擊左邊的那個時，下面的功能就會啟動；
function myFunction() {
document.getElementById("aLetterLeftSide").style.display="none";
document.getElementById("aLetterRigtSide").style.display="inline-block";
}
它有效，但我必須為每個具有不同 ID 的字母執行此操作。所以大約有 50 個功能:( 有沒有辦法將其縮短為更少的功能？謝謝您的回答 :)
uj5u.com熱心網友回復：
要系結的功能，使用元素元素id小號（MDN Webdocs鏈接）。當您有一堆需要相同功能的元素時，只需使用ElementClassName (MDN Webdocs Link) 來系結它們即可。
在下面的示例中，我簡單地將字母class定義為letter-span，然后我onclick迭代地設定(MDN Webdocs Link) 屬性...
var letterspans = document.getElementsByClassName("letter-span");
var onclickfunc = function(e) {
if(this.style.float) {
this.style.float = '';
} else {
this.style.float = 'right';
}
};
for(i = 0; i < letterspans.length; i ) {
letterspans[i].onclick = onclickfunc;
}<span data-letter="a" class="letter-span">A</span> |
<span data-letter="b" class="letter-span">B</span> |
<span data-letter="c" class="letter-span">C</span> |
<span data-letter="d" class="letter-span">D</span> 筆記
以上是一個完整的、作業的、獨立的演示（請注意：最小可重現代碼）。在這種情況下，我做了if(this.style.float){和this.style.float = ''；您可能需要不同的條件和setter，也許if(this.classList.contains('rightside')) {..，和this.classList.add('rightside')沿this.classList.remove('rightside')。我沒有這樣做，因為，我想要在演示中完全重現的東西。
uj5u.com熱心網友回復：
事件委托允許您對無限數量的元素使用單個事件偵聽器。
在包含您要單擊的所有元素的父元素上添加事件偵聽器：
document.querySelector(Parent).onclick = clickHandler;
在clickHandler(event)使用event.target以獲得點擊的元素：
const clicked = event.target
檢查它是否是正確的元素：
if (clicked.matches('.node')) {...
養成使用class代替的習慣#id
下面的示例允許您在兩個容器之間移動專案。
const moveNode = event => {
const clicked = event.target;
const from = clicked.parentElement;
const toB = document.querySelector('.B');
const toA = document.querySelector('.A');
if (clicked.matches('.node')) {
const node = from.removeChild(clicked);
if (from.matches('.A')) {
toB.appendChild(node);
} else {
toA.appendChild(node);
}
} else {
return false;
}
}
const main = document.querySelector('main');
main.onclick = moveNode;main {
display: flex;
justify-content: space-around;
}
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 45vw;
min-height: 20vh;
border: 1px solid black;
}
.node {
font-size: 3ch;
border: 1px solid black;
width: 3ch;
height: 2ch;
text-align: center;
cursor: pointer;
}<main>
<section class='A'>
<div class='node'>A</div>
<div class='node'>B</div>
<div class='node'>C</div>
<div class='node'>D</div>
<div class='node'>E</div>
<div class='node'>F</div>
<div class='node'>G</div>
</section>
<section class='B'></section>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/376174.html
標籤：javascript 功能
下一篇：當其他功能正在運行時禁用功能