Jquery / Javascript: попытка остановить последующие операторы if, использующие логические значения - PullRequest
Новая
       15

Jquery / Javascript: попытка остановить последующие операторы if, использующие логические значения

0 голосов
/ 12 июня 2018

Я пытаюсь использовать логическое значение для работы с некоторыми операторами if.Мой код выглядит примерно так: 

let found = false

function myFunction() {
  if (found === false) {
    ($('#character').click(function() {
      $('#redBox').animate({
        right: '-=700px'
      });
      $("#redBox").css({
        backgroundColor: "grey"
      });
      $('#blueBox').animate({
        right: '-=700px'
      });
      $("#blueBox").css({
        backgroundColor: "grey"
      });
      found = true;
    }));
  };
}
}
myFunction();
if (found === false) {
  ($('#redBox').click(function() {
    $('#character').animate({
      right: '-=700px'
    });
    $("#character").css({
      backgroundColor: "grey"
    });
    $('#blueBox').animate({
      right: '-=700px'
    });
    $("#blueBox").css({
      backgroundColor: "grey"
    });
    found = true;
  }));
};
}

Я хочу, чтобы выполнялся только один или другой из операторов if.Поэтому, когда я нажимаю один div (т. Е. #Character), логическое значение становится истинным, что предотвращает выполнение другого оператора if.

Однако этого не происходит, и операторы без щелчка по-прежнему выполняются, даже если логическое значение оказалось истинным.

Ценю любую помощь, которую я могу получить!

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Проблема в том, что найденная переменная присваивается в момент щелчка.В этот момент вы уже связали оба прослушивателя событий с элементами, и они будут оставаться там до тех пор, пока не будут удалены.Если вы хотите, чтобы когда-либо происходило только одно, вам нужно сделать оператор if внутри клика.

    let found = false
function myFunction(){
    ($('#character').click(function(){
        if (found === false){
            $('#redBox').animate({right: '-=700px'});
            $("#redBox").css({backgroundColor: "grey"});
            $('#blueBox').animate({right: '-=700px'});
            $("#blueBox").css({backgroundColor: "grey"});
            found = true;
        }
    }));
}

myFunction();
($('#redBox').click(function(){
    if (found === false){
        $('#character').animate({right: '-=700px'});
        $("#character").css({backgroundColor: "grey"});
        $('#blueBox').animate({right: '-=700px'});
        $("#blueBox").css({backgroundColor: "grey"});
        found = true;
    };
}));

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

    var fired = false;
$('#redBox, #character').click(function(e){
    if(! fired){
        fired = true;
        if(this.id === "redBox"){
            $('#character').animate({right: '-=700px'});
            $("#character").css({backgroundColor: "grey"});
        }else{
            $('#redBox').animate({right: '-=700px'});
            $("#redBox").css({backgroundColor: "grey"});
        }
        $('#blueBox').animate({right: '-=700px'});
        $("#blueBox").css({backgroundColor: "grey"});
    }
});

Кроме того, вы можете избавиться от оператора if все вместе, и простоудалить прослушиватель событий после первого вызова.Это оказывает положительное влияние на страницу, потому что вы больше не вызываете эту функцию для будущих кликов.Минимальный в этом случае, но хорошая практика все же: 

$('#redBox, #character').on('click', function(e){
    if(this.id === "redBox"){
        $('#character').animate({right: '-=700px'});
        $("#character").css({backgroundColor: "grey"});
    }else{
        $('#redBox').animate({right: '-=700px'});
        $("#redBox").css({backgroundColor: "grey"});
    }
    $('#blueBox').animate({right: '-=700px'});
    $("#blueBox").css({backgroundColor: "grey"});

    $('#redBox, #character').off('click');//remove the event from #redBox and #character
});
0 голосов
/ 12 июня 2018

Проблема в том, что вы определяете .click() поведение внутри условного выражения.

Чтобы разрешить только один щелчок, вам нужно поменять логику,и установите условие для found внутри каждого обработчиков .click(): 

let found = false;

$("#character, #redBox").click(function() {
  if (found === false) {
    found = true;
    console.log("Clicked once");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="character">Character</div>
<div id="redBox">Red Box</div>
...