单击按钮更改剩余按钮的颜色答案

【问题标题】：Change color of remaining buttons on click of a button单击按钮更改剩余按钮的颜色
【发布时间】：2016-07-27 14:37:43
【问题描述】：

假设我有 100 个按钮单击任何按钮我想更改除单击按钮之外的其余 99 个按钮的颜色。如何做到这一点？我猜想向所有 100 个按钮添加点击事件处理程序不是一个好主意。请建议我实现这一目标的不同方法。谢谢。

【问题讨论】：

请在问题中提供您的代码。
有帮助你的答案吗？你在寻找任何其他情报吗？

标签： javascript jquery html

【解决方案1】：

这个呢？ (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>

【讨论】：

【解决方案2】：

这是一个简单的 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' 
    }
  })
})

【讨论】：

【解决方案3】：

为什么不这样做

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

好像容易多了

【讨论】：

【解决方案4】：

你可以用 vanilla 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>

【讨论】：

【解决方案5】：

在 HTML 中创建按钮并添加 class-name 或 new attribute 以便更轻松地在 Jquery 中编写 selector。

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

通过定义selector 选择Jquery 中的所有元素，并将CSS 添加到所有元素除了当前元素。为了让它在第二次点击时生效，我们应该重置当前元素的 CSS

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

【讨论】：