• 0

JQuery not replacing text as it should


Question

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 :(

2 answers to this question

Recommended Posts

  • 0

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

This topic is now closed to further replies.
  • Posts

    • https://youtu.be/QvsuYWvtlmw?t=46
    • Teams immersive sounds like a really fun 3D experience by Usama Jawad Microsoft Teams is heavily used in enterprise environments, especially where customers are well entrenched in Redmond's ecosystem. As such, it is imperative for Microsoft to regularly add new features to Teams to retain its existing customers while also attracting new ones. Now, the firm has announced immersive 3D virtual events for the communication and collaboration software. Teams immersive is basically a custom 3D environment that enables attendees and organizers to interact with each other in a more natural way. Managing and planning an immersive event is as easy as scheduling a regular Teams meeting as you can do so directly via the Teams calendar UX. The process to set up Teams immersive appears to be quite intuitive and, well, fun. You can add 3D models, logos, images, text, and video to the environment to customize it according to your preferences using the Editor utility, without knowing any coding language. But if that sounds too hectic, you can also leverage the existing templates from Microsoft. Teams immersive aims to make virtual events more interacting and engaging. Organizers can shine a spotlight on their avatar when they start an event, bring virtual attendees to the stage during the Q&A session, find a specific attendee, and see the crowd's reactions as you move between rooms like an actual host. Teams immersive also empowers more natural experiences through spatial audio, with people also having the ability to listen to someone better by just moving closer to them virtually. This could be very useful in large events, for example, virtual conferences or an all-hands meeting hosted in 3D on Teams. That said, it is important to note that Teams immersive is currently in public preview and requires the rather expensive Teams Premium add-on license, which costs a hefty $10 per user per month for an organization.
  • Recent Achievements

    • Week One Done
      NeoWeen earned a badge
      Week One Done
    • One Month Later
      BA the Curmudgeon earned a badge
      One Month Later
    • First Post
      Doreen768 earned a badge
      First Post
    • One Month Later
      James_kobe earned a badge
      One Month Later
    • Week One Done
      James_kobe earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      656
    2. 2
      ATLien_0
      254
    3. 3
      Xenon
      167
    4. 4
      neufuse
      146
    5. 5
      +FloatingFatMan
      121
  • Tell a friend

    Love Neowin? Tell a friend!