• 0

JQuery not replacing text as it should

Asked by gregor,

 Share

Question

Proficient

gregor

Posted
Posted

Hi, here's my code:

HTML


<a href="" class="button off"><div class="button toggle">on</div><img src="https://icons.iconarchive.com/icons/artdesigner/urban-stories/128/House-icon.png" /><br />DOOR</a>
[/CODE]

JQuery code AFTER HTML (in <body> tags):

[CODE]<script>
$(".button").click(function () {
$(".toggle", this).text(($(".toggle", this).text() == "on") ? "off" : "on");
});</script>[/CODE]

what it should do?

- if button toggle <div> element is set to "on", set it to off. otherwise, set ti to on. :)

what it does?

- it shows the replacement but the text imediately jumps back to "on". :(((

I'm going crazy, clueless where's the catch???

Help me please :(

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Grand Master

lnmnky

Posted
Posted

You've got nested .buttons. It's probably causing some issues.

the callback inside your text() is looking for another nested .toggle inside "this", which is the Div.toggle. I'm sure it's getting itself in a twist.

Let me get a page running....

You might need to prevent the default.


<script>
$(".button").click(function (e) {
e.preventDefault();
		$(".toggle", this).text(($(".toggle", this).text() == "on") ? "off" : "on");
});</script>
[/CODE]

edit : solution

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing