Если оператор не работает в моем коде JQuery, хотя он должен

Question

У меня есть функция, которая делает div-бокс с именем Karusell перемещается на x px в сторону, щелкая другой блок div с именем bokse1. Изменение также анимировано. У меня также есть функция, которая делает это каждый раз, когда я нажимаю bokse1, «1» добавляется в «nextClicked». Я попытался сделать так, чтобы при nextClicked = 2 первая функция перестала работать, выполнив if (nextClicked! = 2), но по какой-то странной причине она не работает.

Вот скрипка: http://jsfiddle.net/vbLjcpx1/7/

Код:

currentNextClicked = 0;

nextClicked = 0;

$(document).ready(function() {

  if (nextClicked != 2) {

    $("#bokse1").click(function() {
      $("#Karusell").animate({
        marginLeft: ["+=10px", "linear"],
      }, 400, function() {});
    });

    $('#bokse1').live('click', function() {
      currentNextClicked = nextClicked;
      nextClicked = currentNextClicked + 1;
      console.log(nextClicked)
    });

  }
});

#bokse1 {
  width: 20px;
  height: 20px;
  background-color: blue;
}

#bokse2 {
  width: 20px;
  height: 20px;
  background-color: red;
}

#Karusell {
  width: 30px;
  height: 30px;
  background-color: indigo;
  display: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="bokse1"></div>
<div id="bokse2"></div>

<div id="Karusell">

Answer 1

Согласно вашему коду ваше if состояние находится в $(document).ready. Поэтому, когда этот обратный вызов будет вызван, тогда ваш if будет оценен. Однако он не будет вызываться для каждого клика.

При нажатии будет проверяться только следующий код, который не имеет никаких условий.

$("#bokse1").click(function() {
  $("#Karusell").animate({
    marginLeft: ["+=10px", "linear"],
  }, 400, function() {});
});

$('#bokse1').live('click', function() {
  currentNextClicked = nextClicked;
  nextClicked = currentNextClicked + 1;
  console.log(nextClicked)
});

---

Также, в моем понимании, вам не нужны 2 обработчика. Это может быть обработано в 1, а также

$("#bokse1").click(function() {
  if (currentNextClicked++ < 2) {
    $("#Karusell").animate({
      marginLeft: ["+=10px", "linear"],
    }, 400, function() {});
  }
  console.log(currentNextClicked)
});

---

Также в соответствии с общим кодом следующий код не имеет смысла:

$('#bokse1').live('click', function() {
  currentNextClicked = nextClicked;
  nextClicked = currentNextClicked + 1;
  console.log(nextClicked)
});

Числовые значения хранятся в 2 переменных. Если мне нужно угадать, currentNextClicked относится к текущей итерации, а nextClicked указывает на следующую. Но этого можно достичь и с одной переменной, так как nextClicked всегда будет currentNextClicked + 1. Также, если вы заметите, if в приведенном выше коде < 2. Это связано с тем, что != 2 будет действительным, если nextClicked станет больше 2. Использование оператора меньше чем было бы лучше, если вы хотите ограничить его только 2 значениями.

Предложения:

• $().live устарело. Таким образом, вы не сможете легко обновить. Так что в качестве предложения старайтесь избегать его.
• Объявление переменной без var|const|let делает ее глобальной переменной. Это плохая практика - отбирать переменные в глобальную область видимости. Поэтому всегда используйте ключевое слово для объявления переменной.
• Объявление переменной вне какой-либо функции также сделает ее глобальной. Поэтому постарайтесь даже избежать этого. В идеале переменная должна иметь ограниченную и очень специфическую область видимости. Это означает, что объявление переменной только в той области, где она будет использоваться.
• != выполнит свободную проверку. Это означает, что 2 != '2' вернет false, но должно вернуть true. Попробуйте использовать !==, чтобы убедиться, что переданная переменная является только числом.

Пример кода:

$(document).ready(function() {
  var currentNextClicked = 0;
  $("#bokse1").on('click', function() {
    if (currentNextClicked++ < 2) {
      $("#Karusell").animate({
        marginLeft: ["+=10px", "linear"],
      }, 400, function() {});
    }
    console.log(currentNextClicked)
  });
});

#bokse1 {
  width: 20px;
  height: 20px;
  background-color: blue;
}

#bokse2 {
  width: 20px;
  height: 20px;
  background-color: red;
}

#Karusell {
  width: 30px;
  height: 30px;
  background-color: indigo;
  display: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="bokse1"></div>
<div id="bokse2"></div>

<div id="Karusell">

---

Справка:

• Я слышал, что глобальные переменные плохие, какое альтернативное решение мне следует использовать?
• В чем разница между методами bind и live в jQuery?
• Альтернатива jquery live, которая может работать

Answer 2

Слушатель на bokse1 не остановится на вашем if,

, чтобы предотвратить возникновение кода, и поместите ваш if после его нажатия следующим образом:

$("#bokse1").click(function() {
 if (nextClicked != 2) {
  $("#Karusell").animate({
    marginLeft: ["+=10px", "linear"],
  }, 400, function() {});
 }
});

Потому что, когда вы нажимаете JS, вы переходите напрямуювнутри вашего слушателя начало кода вызывается только один раз при загрузке страницы