Блог

Главная - Вопросы по программированию - Повторяемые функции jQuery

Повторяемые функции jQuery

#javascript #jquery

#javascript #jquery

Вопрос:

Я новичок в jQuery и пытаюсь понять, как повторять функции. Как вы можете видеть из приведенного ниже кода, при нажатии на кнопку она превратится в «Меня щелкнули» в h1, а затем при повторном нажатии она вернется к «Нажмите меня», однако, конечно, после этого она останавливается. Без необходимости постоянно писать эти строки снова и снова, какой самый простой способ повторить это, чтобы каждый раз, когда я нажимаю на него, он менялся?

 $("button").click(function() {
  $(this).html("<h1>I was clicked</h1>");
  $(this).click(function() {
    $(this).html("Click Me")
  })
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Hello</h1>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>

Ответ №1:

Вы могли бы написать пару функций для использования в качестве обработчиков событий и назначить другую функцию в качестве обработчика событий при вызове одной из них:

 function clickme() {
  $(this).html("Click Me");
  $(this).off('click').click(clicked);
}

function clicked() {
  $(this).html("<h1>I was clicked</h1>");
  $(this).off('click').click(clickme);
}

$("button").click(clicked); 
 <body>
  <h1>Hello</h1>
  <button>Click Me</button>
  <button>Click Me</button>
  <button>Click Me</button>
  <button>Click Me</button>
  <button>Click Me</button>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

Комментарии:

1. Используя этот метод, я рекомендую обрезать старые обработчики событий, чтобы они не накапливались , что-то вроде $(this).off('click').click(...) . См off() .

2. @showdev хороший момент; Я отредактировал, чтобы сделать это.

3. @mikeymike Пожалуйста, посмотрите мое редактирование, оно предотвращает получение кнопками нескольких обработчиков событий (что в конечном итоге может вызвать проблемы с памятью / скоростью)

Ответ №2:

Попробуйте это:

 $("button").click(function() {

  if ($(this).html().indexOf("I was clicked") == -1)
    $(this).html("<h1>I was clicked</h1>");
  else
    $(this).html("Click Me")

}); 
 <body>
  <h1>Hello</h1>
  <button>Click Me</button>
  <button>Click Me</button>
  <button>Click Me</button>
  <button>Click Me</button>
  <button>Click Me</button>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

Метки: