這個問題在這里已經有了答案： 為什么我的顯示隱藏按鈕需要第一次雙擊 3 個答案 為什么 element.style 在 JS 中總是回傳空？ (2 個回答) 6 天前關閉。
簡單的代碼：
-------------css--------------
<style>
.table{
display: block;
}
.row{
position: relative;
margin-bottom: 45px;
}
.learn{
font-size: 12px;
position: absolute;
top: 30px;
left: 0;
z-index:-1;
text-align: left;
display: inline;
}
.row input{
position: absolute;
top: 30px;
z-index: 1;
right: 0;
font-size: 15px;
padding: 7px 5px;
border-radius: 10px;
background: transparent;
}
</style>
-----------------html-------------------
<div class="table">
<div class="row">
<div class="thead">Regular Polish</div>
<div class="td">$20</div>
<span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span>
<input class="showBut" type="submit" onclick="showLearn();" value="Learn more"></input>
</div>
<div class="row">
<div class="thead">Gel Polish</div>
<div class="td">$30</div>
<span class="learn">Trimming, shapping, culticle removing, Gel polish put on</span>
<input class="showBut" type="submit" onclick="showLearn();" value="Learn more"></input>
</div>
----------------script---------------
<script>
let learn = document.querySelectorAll('.learn')
let showBut = document.querySelectorAll('.showBut');
function showLearn(){
for (const [index, i ] of showBut.entries()){
i.addEventListener('click', (e) => {
learn[index].style.display =
(learn[index].style.display === 'none') ?
'inline' : 'none';
}
}
};
</script>
大家好。這是我的代碼。我想要做的是：如果我單擊任何按鈕，跨度“上方”將顯示為行內。但是我必須多次單擊才能使按鈕起作用。請幫忙！太感謝了！
或者，如果你們有任何想法使用具有相同事件偵聽器和事件處理程式的多個按鈕，那就太好了 ??。再次感謝你
uj5u.com熱心網友回復：
document.querySelectorAll('.span').forEach((ele) => {
ele.addEventListener('click', (e) => {
ele.classList.toggle('red');
})
}).span {
font-size: 16px;
cursor: pointer;
background: yellow;
color: #fff;
}
.red {
background-color: red;
}<span class="span">Red or Yellow</span>
<span class="span">Red or Yellow</span>我希望這會給你一些想法。祝你好運
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/457380.html
標籤：javascript html css 按钮 输入