使用jQuery的點擊事件無法更改變量

Question

我正在嘗試使用點擊事件將全局變量finish從false更改爲true以防止懸停在圓上。 我使用點擊事件後，我的全局變量finish沒有改變（它仍然是false），我仍然可以在一些圈子上徘徊。 這是爲什麼發生？

var finish = false; 
 

 
$(".rating-circle").click(function() { 
 
    $(this).addClass("rating-chosen"); 
 
    $(this).prevAll().addClass("rating-chosen"); 
 
    finish = true; 
 
}); 
 

 
if (finish == false) 
 
{ 
 
    $(".rating-circle").hover( 
 
    \t function() { 
 
     $(this).addClass("rating-hover"); 
 
     $(this).prevAll().addClass("rating-hover"); 
 
    }, 
 
     function() { 
 
     $(this).removeClass("rating-hover") 
 
     $(this).prevAll().removeClass("rating-hover"); 
 
    }); 
 
}

body { 
 
    font-family: Verdana; 
 
} 
 
h1, h2, h3 { 
 
    color: darkblue; 
 
} 
 
.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 

 
.rating-hover { 
 
    background-color: yellow; 
 
} 
 

 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Finding elements using jQuery</h2> 
 
<h3>Rate this session</h3> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 1

的問題是，你的檢查邏輯需要你的懸停事件上面的地方結合，所以只計算一次當代碼是第一次運行。您需要檢查處理函數本身內的finish標誌，或者您可以在單擊時解除處理程序的綁定。

$(".rating-circle").hover(function() { 
    if (finish) return; 

    $(this).addClass("rating-hover"); 
    $(this).prevAll().addClass("rating-hover"); 
}, function() { 
    $(this).removeClass("rating-hover") 
    $(this).prevAll().removeClass("rating-hover"); 
}); 

而且，這將是更地道/語義來命名標誌像finished或hasFinished。

Answer 2

您的全局變量確實發生了變化，但是太遲了，到那時事件處理程序已經被綁定，並且條件並不重要。

當你在點擊反正加入了獨特的類，你可以只檢查該類的hover事件

$(".rating-circle").click(function() { 
 
    $(this).addClass("rating-chosen"); 
 
    $(this).prevAll().addClass("rating-chosen"); 
 
}); 
 

 
$(".rating-circle").hover(
 
    function() { 
 
    if ($(".rating-circle.rating-chosen").length === 0) { 
 
     $(this).addClass("rating-hover"); 
 
     $(this).prevAll().addClass("rating-hover"); 
 
    } 
 
    }, 
 
    function() { 
 
    if ($(".rating-circle.rating-chosen").length === 0) { 
 
     $(this).removeClass("rating-hover") 
 
     $(this).prevAll().removeClass("rating-hover"); 
 
    } 
 
    });

body { 
 
    font-family: Verdana; 
 
} 
 

 
h1, 
 
h2, 
 
h3 { 
 
    color: darkblue; 
 
} 
 

 
.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 

 
.rating-hover { 
 
    background-color: yellow; 
 
} 
 

 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Finding elements using jQuery</h2> 
 
<h3>Rate this session</h3> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 3

var finish = false; 
 

 
$(".rating-circle").click(function() { 
 
    $(this).addClass("rating-chosen"); 
 
    $(this).prevAll().addClass("rating-chosen"); 
 
    finish = true; 
 
}); 
 

 
$(".rating-circle").hover(function() { 
 
    if (finish == false){ 
 
    $(this).addClass("rating-hover"); 
 
    $(this).prevAll().addClass("rating-hover"); 
 
    } 
 
},function(){ 
 
    if (finish == false){ 
 
    $(this).removeClass("rating-hover") 
 
    $(this).prevAll().removeClass("rating-hover"); 
 
    } 
 
});

body { 
 
    font-family: Verdana; 
 
} 
 
h1, h2, h3 { 
 
    color: darkblue; 
 
} 
 
.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 

 
.rating-hover { 
 
    background-color: yellow; 
 
} 
 

 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Finding elements using jQuery</h2> 
 
<h3>Rate this session</h3> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

內