javascript - Jquery if else 语句不改变变量

Question

我确定这很愚蠢，但我不知道为什么在单击箭头后这个 clicked 变量没有变为 true 。 我在这里使用 jQuery。

var clicked = false;
if (!clicked){
    $('#click').on('click', function(){
        alert('clicked');
        clicked = true;
    });
}else {
    $('#click').on('click', function(){
        alert('clicked again');
    });
}

现场示例（也作为小提琴）：

var clicked = false;
if (!clicked){
    $('#click').on('click', function(){
        alert('clicked');
        clicked = true;
    // end
    });
}else {
    $('#click').on('click', function(){
        alert('clicked again');
    });
}

<div class="col-lg-1 team_padding">
<p id="click">click me</p>
</div>

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

标签： javascriptjquery

Answer 1

是的，但这不会改变你连接的事件处理程序。下一次单击只是再次运行相同的处理程序（if块中的那个），因为您显示的代码只运行一次，设置了一个处理程序。证明：

var clicked = false;
if (!clicked){
    $('#click').on('click', function(){
        alert('clicked');
        clicked = true;
    });
}else {
    $('#click').on('click', function(){
        alert('clicked again');
    });
}
var timer = setInterval(function() {
  console.log("clicked = ", clicked);
}, 1000);
setTimeout(function() {
  clearInterval(timer);
}, 10000);

<div class="col-lg-1 team_padding">
<p id="click">click me</p>
</div>

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

相反，将条件逻辑移动到处理程序中：

var clicked = false;
$('#click').on('click', function(){
    if (!clicked) {
        alert('clicked');
        clicked = true;
    } else {
        alert('clicked again');
    }
});

例子：

var clicked = false;
$('#click').on('click', function(){
    if (!clicked) {
        alert('clicked');
        clicked = true;
    } else {
        alert('clicked again');
    }
});

<div class="col-lg-1 team_padding">
<p id="click">click me</p>
</div>

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