Change the status of a single on / off switch in a series intersecting dom starting with an attribute in jquery

Question

I have a problem with a series of on / off switches in jQuery.

This is the markup of the switches:

<div class="switchOnOff"> <div class="switchLed"></div> <p class="switchFeedback"></p> <a class="switchButton" rel="on" id="one"><span></span></a> </div> <div class="switchOnOff"> <div class="switchLed"></div> <p class="switchFeedback"></p> <a class="switchButton" rel="on" id="two"><span></span></a> </div> 

This is my js:

 $('.switchOnOff .switchButton').click(function() { if ( $('.switchButton').attr('rel') == 'off' ) { $(this).next('.switchLed').addClass("on"); $(this).prev('.switchFeedback').html("on"); } else if ( $('.switchButton').attr('rel') == 'on' ) { $(this).next('.switchLed').addClass("off"); $(this).prev('.switchFeedback').html(feedbackOn); }}); 

But this code does not work. I also tried using the "next", "pre" or "closest" selector, but the DOM intersection does not work. In conclusion, I want to get an on / off function that can change the status of a single switch.

I hope I get it.

Any help would be truly appreciated.

Answer 1

You can do (UPDATED AFTER COMMENTS)

 $('.switchOnOff .switchButton').click(function() { var div = $(this).closest('.switchOnOff'); var $this = $(this); if ($this.attr('rel') == 'off') { $this.attr('rel', 'on'); div.find('.switchLed').addClass("on").removeClass("off"); div.find('.switchFeedback').html("on"); } else if ($this.attr('rel') == 'on') { $this.attr('rel', 'off'); div.find('.switchLed').addClass("off").removeClass("on"); div.find('.switchFeedback').html("off"); } }); 

fiddle here http://jsfiddle.net/YpfmD/3/

EDIT for the last comment: set the "First Pass", which you could do:

 var switcher = function(el) { var div = $(el).closest('.switchOnOff'); var $this = $(el); if ($this.attr('rel') == 'off') { $this.attr('rel', 'on'); div.find('switchLed').addClass("on").removeClass("off"); div.find('.switchFeedback').html("on"); } else if ($this.attr('rel') == 'on') { $this.attr('rel', 'off'); div.find('switchLed').addClass("off").removeClass("on"); div.find('.switchFeedback').html("off"); } }; //Set up the various div $('.switchOnOff .switchButton').each(function() { switcher(this); }); //attach the handler $('.switchOnOff .switchButton').click(function() { switcher(this); }); 

fiddle here: http://jsfiddle.net/YpfmD/4/

Answer 2

Inside your click event, none of your selectors refers to the actual click. That is, if you press the second .switchonOff .switchButton , most likely your selectors will find the first element (top). (for example, $('.switchButton').attr('rel') will always be retrieved from the first element on the page, even though the event is fired from the second element)

To fix this, make sure that you associate your searches with the item itself. this can be done by providing a scope parameter:

 var feedbackOn = 'ON'; $('.switchOnOff .switchButton').click(function(){ // here your scope var $scope = $(this).closest('.switchOnOff'), rel = $(this).attr('rel'); // now locate the elements you want from within scope: if (rel == 'off'){ $(this).attr('rel','on'); $scope.find('.switchLed').removeClass('off').addClass('on'); $scope.find('.switchFeedback').html(feedbackOn); }else if (rel == 'on'){ $(this).attr('rel','off'); $scope.find('.switchLed').removeClass('on').addClass('off'); $scope.find('.switchFeedback').html('OFF'); } return false; }); 

Demo

screenshot of http://img811.imageshack.us/img811/2027/40913258.png

You can also refer to .removeClass to remove the on / off classes used when they are opposite. Unaware of my intentions, I did not add it, but thought that I wanted to mention it if he wanted to.