單擊按鈕時改變剩餘按鈕的顏色

Question

假設我點擊任意按鈕時有100個按鈕我想更改除點擊按鈕之外的其餘99個按鈕的顏色。如何實現這一目標？將點擊事件處理程序添加到所有100個按鈕並不是我想的一個好主意。請告訴我不同​​的方式來實現這一點。謝謝。

Answer 1

爲什麼不這樣做

$(document).on('ready',function(){ 
$('button').click(function() { 
    $('button').css('background', 'red'); 
    $(this).css('background','none'); 
    }); 
}); 

這似乎更容易

Answer 2

這是怎麼回事？ （http://jsfiddle.net/nw77tgya/）

關閉當然你可以調味的代碼。您可以使用類別選擇器替換「按鈕」選擇器，以縮小您對按鈕的選擇範圍。

你也可以改變CSS添加和刪除類和做其他的東西。

這個例子應該讓你的方式，雖然;）

$(document).on('ready',function(){ 
 
$('button').click(function() { 
 
    $('button').not($(this)).css('background', 'red'); 
 
    $(this).css('background','none'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button>

Answer 3

你可以用香草JS做到這一點，是這樣的：

var buttons = document.querySelectorAll('button'); 
 

 
[].forEach.call(buttons, function(btn) { 
 
    btn.addEventListener('click', function() { 
 
    var clickedButton = this; 
 
    [].forEach.call(buttons, function(innerBtn) { 
 
     if (innerBtn !== clickedButton) { 
 
     innerBtn.classList.add('green'); 
 
     } 
 
     else { 
 
     innerBtn.classList.remove('green'); 
 
     } 
 
    }); 
 
    }); 
 
});

.green { 
 
    background:green; 
 
}

<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button>

或者，在短的jQuery：

var buttons = $('button').click(function(){ 
 
    buttons.not(this).addClass('green'); 
 
    $(this).removeClass('green'); 
 
});

.green { 
 
    background:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button>

Answer 4

在HTML創建按鈕並添加class-name或new attribute，使在寫selector Jquery的容易。

<button class="test">button1</button> 
<button class="test">button2</button> 
<button class="test">button3</button> 

通過定義selector選擇Jquery的所有元素和CSS添加到除了當前元素的所有元素。 爲了使它在第二次點擊的工作，我們應該重置當前元素

$(".test").click(function(){ 
    $(this).css("background-color", ""); 
    $(".test").not($(this)).css("background-color", "red"); 
}); 

Answer 5

的CSS這裏有一個簡單的JavaScript解決方案。 它會查找與提供給querySelectorAll的選擇器相匹配的所有元素，遍歷它們，如果它們不是被點擊的按鈕 - e.target - 它會將它們的類設置爲您在某處設置的某個對象。

如果你的按鈕不上課：

button.addEventListener('click', function(e) { 
    e.target.className = '' 
    [].forEach.call(document.querySelectorAll('button'), function(b) { 
    if (b !== e.target) { 
     b.className = 'other-color' 
    } 
    }) 
}) 

如果你的原始類是 '純按鈕'：

button.addEventListener('click', function(e) { 
    e.target.className = 'plain-button' 
    [].forEach.call(document.querySelectorAll('.plain-button'), function(b) { 
    if (b !== e.target) { 
     b.className = 'plain-button other-color' 
    } 
    }) 
})