javascript - jquery移动按钮文本通过点击在两个文本之间切换

Question

我对 jquery mobile 和按钮文本切换有疑问。

每次单击 sie 按钮时，按钮文本都会发生变化。它只能工作一次。我单击按钮，文本和背景发生变化，第二次单击它时什么也没有发生。这是我的代码:

按钮声明:

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

这是我拥有的功能:

$(".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();

    });

也许有人可以帮助我。

Answer 1

失败是因为你的 ID 始终处于“锁定”状态。检查元素中的文本。

尝试这样的事情:

$(".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 .