這是我的代碼，按鈕是動態創建的
<button class="same_name" onclick='myfunction()'>button name</button>
<button class="same_name" onclick='myfunction()'>button name</button>
<button class="same_name" onclick='myfunction()'>button name</button>
<button class="same_name" onclick='myfunction()'>button name</button>
我想向我單擊的按鈕添加類
function myfunction()
{
$(this).addClass("active");
}
uj5u.com熱心網友回復：
如果您使用的是 jQuery，并且您正在動態添加按鈕，請去掉行內 JS，并使用事件委托將一個偵聽器附加到父容器以監視來自same_name按鈕的事件，然后為單擊的事件添加一個類按鈕。（我toggleClass在這個例子中使用。）
$(document).on('click', '.same_name', function () {
$(this).toggleClass('active');
});.active { color: red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="same_name">button 1</button>
<button class="same_name">button 2</button>
<button class="same_name">button 3</button>
<button class="same_name">button 4</button>uj5u.com熱心網友回復：
安迪的解決方案是正確的。如果您希望使用自己的解決方案，只需將事件傳遞給函式。
function myfunction(event){
let eTar = event.target
$(eTar).addClass("active");
}.active { color: red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="same_name" onclick='myfunction(event)'>button name</button>
<button class="same_name" onclick='myfunction(event)'>button name</button>
<button class="same_name" onclick='myfunction(event)'>button name</button>
<button class="same_name" onclick='myfunction(event)'>button name</button>
uj5u.com熱心網友回復：
這是香草 JS 的答案（根本不需要 jQuery，在 2022 年幾乎沒有）：
document.addEventListener('click', function ({target}) {
if (target.matches('button.same_name'))
target.classList.add('active');
});.active { color: red; }<button class="same_name">button 1</button>
<button class="same_name">button 2</button>
<button class="same_name">button 3</button>
<button class="same_name">button 4</button>uj5u.com熱心網友回復：
使用切換類
$('.same_name').on('click', function () {
$('.same_name').removeClass('active'); // if you wants to remove class from other buttons
$(this).toggleClass('active');
});.active{
background-color: #000;
color: #fff
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="same_name active">1</button>
<button class="same_name">2</button>
<button class="same_name">3</button>
<button class="same_name">4</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454940.html
標籤：javascript html jQuery
上一篇：如何在XML中搜索？(PHP)