jQuery移动按钮文本通过单击在两个文本之间切换

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.

Answer 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 .

Answer 2

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();

});