Question

假设我点击任意按钮时有100个按钮我想要更改剩余99个按钮的颜色，但点击的按钮除外。怎么做到这一点？我想，在所有100个按钮上添加点击事件处理程序并不是一个好主意。请建议我实现这一目标的不同方法。谢谢。

Answer 1

当然，您可以调整代码。您可以使用类选择器替换“按钮”选择器，以缩小选择的按钮。

您还可以更改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 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' 
    }
  })
})

如果您的原始课程是＆＃39;普通按钮＆＃39;：

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

Answer 3

您可以使用vanilla JS执行此操作，如下所示：

＆＃13;

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

＆＃13;

.green {
  background:green;  
}

＆＃13;

<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>

＆＃13;

或者，简而言之：jQuery：

＆＃13;

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

＆＃13;

.green {
  background:green;  
}

＆＃13;

<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>

＆＃13;

Answer 4

在 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" );
});

Answer 5

为什么不这样做

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

似乎更容易

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

5 个答案: