CODEWITHSUNDEEP
javascriptjqueryhtml
Nandish
Nandish

Reputation: 125

Change color of remaining buttons on click of a button

Let's say I have 100 buttons on click of any button I want to change the color of remaining 99 buttons except the clicked button. How to achieve this? Adding click event handlers to all 100 buttons is NOT a good idea I guess. Please suggest me different ways of achieving this. Thank you.

Upvotes: 0

Views: 1822

Answers (5)

khem poudel
khem poudel

Reputation: 587

Why not do this

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

It seems much easier

Upvotes: 0

NamingException
NamingException

Reputation: 2404

Create Buttons in HTML and add a class-name or new attribute to make easier for writing selector in Jquery.

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

Select all the elements in Jquery by defining the selector and add the CSS to all elements except the current element. For making it work on second click, we should reset the CSS of the current element

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

Upvotes: 0

dontexist
dontexist

Reputation: 5642

Here's a plain JavaScript solution. What this does is it looks up all elements matching the selector supplied to querySelectorAll, loops through them, and if they're not the button that was clicked - the e.target - it sets their class to be something that you've styled somewhere.

If your buttons don't have classes:

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

If your the original class is 'plain-button':

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

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29249

You can do this with vanilla JS, like this:

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>

Or, in short 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>

Upvotes: 0

Tom B.
Tom B.

Reputation: 2962

What about this? (http://jsfiddle.net/nw77tgya/)

Off course you can flavour the code. You can replace the 'button' selector with a class selector to narrow your selection of buttons.

You can also change the css to add and remove classes and do other stuff.

This example should get you on the way though ;)

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

Upvotes: 2

Related Questions