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

Answer 2

您需要检查text包含的值。您正在检查id，它将始终返回true，因为ID不会更改，因此您的if始终为真。

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

});

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

2 个答案: