单击按钮时改变剩余按钮的颜色

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' 
    } 
    }) 
})