Мое if (i>0) утверждение здесь не работает, любой совет, почему бы и нет?

http://jsfiddle.net/qup2R/

Я хочу, чтобы мой начальный блок формы не реагировал на {{X 0}} y = 0`

<html>
  <head>
    <script src="jquery.js"></script>
    <script type="text/javascript">
      var i = 0;
      $('document').ready(function () {
        if (i > 0) {
          $('.remove').click(function () {
            i--;
            $(this).closest('form').remove();
          });
        }
        $('.clickme').click(function () {
          if (i < 5) {
            i++;
            $(".form1").last().clone(true, true).appendTo("body");
          } else {
            $(".form1")
          }
        });
      });
    </script>
  </head>

  <body>
     <h3>Invite your friends</h3>

    <form class="form1">
      <input id="email" name="email" />
      <a class="remove" href="#">Remove</a>
      <br/>
      <br/>
      <a class="clickme" href="#">Add</a>
    </form>
  </body>
</html>
1
IanO.S. 30 Янв 2013 в 15:57

3 ответа

Лучший ответ

Используйте операторы внутри функции click и добавьте логические операторы, такие как && для получения точных результатов.

 $('.remove').click(function () {
     if (i > 0 && i < 5 ) {
         i--;
         $(this).closest('form').remove();
     }
 });

 $('.clickme').click(function () {
     if (i < 5 && i > 0) {
          i++;
          $(".form1").last().clone(true, true).appendTo("body");
     }
 });
2
Barlas Apaydin 30 Янв 2013 в 12:10

Взгляните еще раз на ваш код:

    if (i > 0) {
      $('.remove').click(function () {
        i--;
        $(this).closest('form').remove();
      });
    }

Это связывает обработчик событий со всеми .remove элементами только тогда, когда i > 0. Когда DOM готов, i == 0, поэтому обработчик никогда не привязывается . На самом деле вы пытаетесь добиться, если i > 0 при нажатии на .remove . Таким образом, эта проверка должна быть внутри обработчика, а не снаружи.

    $('.remove').click(function () {
      if (i > 0) {
        i--;
        $(this).closest('form').remove();
      }
    });

РЕДАКТИРОВАТЬ 1: Хорошо, похоже, вы ищете что-то другое. Вы хотите, чтобы ваш первый form не удалялся со страницы, поскольку вы больше не можете добавлять новые формы. Проблема в том, что ваш i представляет количество форм на странице (минус 1, поскольку вы начинаете с 1 формы уже в HTML), а не индекс вставки . Есть несколько способов обойти это:

  • Дайте первой форме дополнительный класс и удалите этот класс в клонированных формах. Затем вы можете проверить, является ли нажатый .remove дочерним элементом form этого класса с чем-то вроде $(this).closest('form').hasClass('firstForm').
  • Вручную добавьте ссылку .remove только в динамически сгенерированные формы. Вы можете создать элемент шаблона, сохранив его в переменной, а затем добавить клоны в новые формы.
  • Проверьте индекс form, чей .remove был нажат. Если это первое, не удаляйте его.

РЕДАКТИРОВАТЬ 2: Хорошо, так что на самом деле вам все равно, будет ли удалена первая форма, вы просто хотите убедиться, что хотя бы одна из форм все еще находится на странице. Вот почему вы отслеживали количество форм. Серьезно, действительно сбивает с толку. Было бы полезно, если бы вы хотя бы объяснили, в чем причина вашего кода, комментирование не является запоздалой мыслью!

Во всяком случае, вам должно хватить моего первоначального исправления (выше правок).

2
Mattias Buelens 30 Янв 2013 в 12:17

Измените jquery на это и попробуйте

$('document').ready(function () {
       var i = 0;
      $('.remove').click(function () {
        if (i > 0) {
          i--;
        $(this).closest('form').remove();
        }
      });

    $('.clickme').click(function () {
      if (i < 5) {
        i++;
        $(".form1").last().clone(true, true).appendTo("body");
      } else {
        $(".form1")
      }
    });
  });
0
Varada 30 Янв 2013 в 12:10