Variable kann nicht geändert werden, indem ein click -Ereignis mit jQuery verwendet wird

Question

Ich versuche, die globale Variable finish von false in true mithilfe des click-Ereignisses zu ändern, um das Schweben der Kreise zu verhindern. Nachdem ich Click-Ereignis verwendet habe, änderte sich meine globale Variable finish nicht (es ist immer noch false) und ich kann immer noch über einige Kreise schweben. Warum passiert das?

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

Das Problem ist, dass Ihr Prüflogik Platz über die Hover-Ereignis nimmt verbindlich, so dass es nur einmal ausgewertet wird, wenn der Code zum ersten Mal ausgeführt wird. Sie müssen das finish Flag innerhalb der Handler-Funktion selbst überprüfen, oder Sie können die Handler nur beim Klicken lösen.

$(".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"); 
}); 

Auch wäre es mehr idiomatische/semantische Ihre Fahne so etwas wie finished oder hasFinished zu nennen.

Answer 2

Ihre globale Variable ändert sich, aber es ist zu wenig zu spät, zu diesem Zeitpunkt sind die Ereignishandler bereits gebunden und die Bedingung spielt keine Rolle.

Wie Sie eine einzigartige Klasse sowieso auf Klick Hinzufügen sind, können Sie nur für diese Klasse überprüfen innerhalb der hover Ereignisse

$(".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>