Sign in to follow this  

JQuery not replacing text as it should

Recommended Posts

gregor    3

Hi, here's my code:

HTML


<a href="" class="button off"><div class="button toggle">on</div><img src="http://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 :(

Share this post


Link to post
Share on other sites
lunamonkey    114

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

  • Like 1

Share this post


Link to post
Share on other sites
gregor    3

Thank you @lunaquote!

Works as charm! :)))

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.