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

Не удалось, так как ваш идентификатор всегда «заблокирован». Проверьте вместо этого текст в элементе.

попробовать что-то вроде этого:

$(".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, поскольку идентификатор не изменится, поэтому ваш 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(); 

});