This is driving me crazy. I have many divs like the example below. when you click on one its class should change.
- <div class="yesNoOpac"><span class="yesNoSpan">here is the text</span></div>
- <script type="text/javascript" charset="utf-8">
$('.yesNoOpac').click(changeClassYesNoOpac);
function changeClassYesNoOpac(e){
$(e.target).removeClass("yesNoOpac");
$(e.target).addClass("yesNoOpacX");
}
</script>
The class change changes the background image (aligned left) and the opacity of the div. This works ok for the div , but the problem I am having is that when I click on the text (aligned right) it is changing the class of the span element. I don't want the class of the span to change as that adds the background image to the span too so I end up with one background image for the div and another for the span that's in the div.
What I want is when I click the div anywhere it only changes the class of the whole div and not both the div and the span.
i have also tried this which gave the same result:
- $('.yesNoOpac:not(.yesNoSpan)').click(changeClassYesNoOpac);
function changeClassYesNoOpac(e){
$(e.target).removeClass("yesNoOpac");
$(e.target).addClass("yesNoOpacX");
}