如何使用JavaScript更改HTML元素的CSS

Question

After reading some questions/answers about this subject I have tried to make it works for me but I can't.

The story line is that I have X elements (so it means no ID just class) and I want to change the background when I click in one.

So with JS I did:

'click .switch' (event) {
    event.toElement.closest("li").css('background-color','black');


    if(this.stateMachine == 'running'){
      Meteor.call("switch", this.nameMachine);
    }

  },

to get the container (here a <li class="liMachine switch"> ) but I have this error:

event.toElement.closest(...).css is not a function

Despite the event.toElement.closest returns the right element:

So what am I doing wrong ?

Answer 1

 $('.liContainer.switch').on('click', function() { $(this).toggleClass('active'); }); 

 .active { background-color: powderblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="liContainer switch">one</li> <li class="liContainer switch">two</li> <li class="liContainer switch">three</li> </ul> 

If $(event.target) works for you then the problem was of course that you did not pass a jQuery object. So you can not use jQuery functions on non jQuery object.

Answer 2

Since you are using Meteor, you may prefer this syntax:

"click .switch": function(event){
$(event.target).css("background-color", "black");
}