jquery mobile button text switching between two text via click

Question

I have an issue with jquery mobile and a button text switch.

The button text should change everytime sie button is clicked. It is working one time only. I click the button, the text and backgound changes, the second time I click it nothing happens. Here ist my code:

Button declaration:

<div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#" id="lock" class="lockaction" >Lock</a></li>
      </ul>
    </div>
  </div>

And here the function I have:

$(".lockaction").click(function(e) { 

            if (e.target.id == "lock" ) {

                document.getElementById("lock").text = "Unlock";
                $(this).css("background-color", "red");

                }

            else {

                document.getElementById("lock").text = "Lock";

                }

        postupdate();

    });

Maybe someone can help me with it.

It fails bacause your ID is always "lock". Check for text in element instead. — Drops
– Drops, Commented Jun 4, 2015 at 8:31

Drops · Accepted Answer · 2015-06-04 08:35:21Z

1

It fails bacause your ID is always "lock". Check for text in element instead.

Try something like this:

$(".lockaction").click(function(e) { 

    e.preventDefault();

    if ($(this).text() === "Lock" ) {
        $(this).text("Unlock");
        $(this).css("background-color", "red");
    } else {
        $(this).text("Lock");
        $(this).css("background-color", "white");
    }

    postupdate();

});

Fiddle.

answered Jun 4, 2015 at 8:35

Drops

2,75020 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drops Over a year ago

Np, please select one of the answers if they helped you.

Zee · Accepted Answer · 2015-06-04 08:46:57Z

0

You need to check what value does the text contains. You were checking for id, it will always return true as the id wont change, so your if is always true.

$(".lockaction").click(function (e) {
    e.preventDefault();//prevent default action
    if ($(this).text() == "Lock") {
        $(this).text("Unlock");
        $(this).css("background-color", "red");

    } else {
        $(this).text("Lock");
        $(this).css("background-color", "white");
    }
    postupdate();

});

edited Jun 4, 2015 at 8:46

answered Jun 4, 2015 at 8:27

Zee

8,4805 gold badges39 silver badges59 bronze badges

1 Comment

TehLulz Over a year ago

Thanks, I tried it and it wasn´t working. With "e.preventDefault();" like Drops did it, it´s working.

Collectives™ on Stack Overflow

jquery mobile button text switching between two text via click

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related