如何阻止jQuery頁面元素重復？

Question

當我單擊鏈接時，我的jQuery代碼將運行。 但是，如果我多次單擊該鏈接，該代碼將重復自身並顯示在先前的代碼下，而我不希望這樣做。 另外，如果我單擊“關閉”選項，然后重新打開它，它將重復一次。 如何阻止它執行此操作？ 順便說一下，這是代碼：

$("#pop").click(function() {
    $("#overlay_form").fadeIn(1000);
    $("#statsStr").append('<br />' + strOne).fadeIn(1000);
    $("#statsCun").append('<br />' + cunOne).fadeIn(1000);
    $("#statsAgil").append('<br />' + agilOne).fadeIn(1000);
    $("#statsWis").append('<br />' + wisOne).fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form").fadeOut("slow");
    $("#statsStr").fadeOut("slow");
    $("#statsCun").fadeOut("slow");
    $("#statsAgil").fadeOut("slow");
    $("#statsWis").fadeOut("slow");

});

謝謝您的幫助！

編輯：我已建議將我的代碼更改為此：

// append the strings only once on load
$(function() {
    $("#statsStr").append('<br />' + strOne);
    $("#statsCun").append('<br />' + cunOne);
    $("#statsAgil").append('<br />' + agilOne);
    $("#statsWis").append('<br />' + wisOne);
});

$("#pop").click(function() {
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});

盡管效果很好，但存在一個問題。 我正在制作的游戲需要“ #pop”功能不時更新，以顯示您的“狀態”。 有什么方法可以刷新代碼，以便顯示更新后的變量？

Answer 1

編輯嘗試此為您的解決方案：

//call this method whenever you want to update your stats
//passing in the variables
var updateStats = function(str, cun, agil, wis) {
    $("#statsStr").html('<br />' + str);
    $("#statsCun").html('<br />' + cun);
    $("#statsAgil").html('<br />' + agil);
    $("#statsWis").html('<br />' + wis);
};

$("#pop").click(function() {
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
$(document).ready(function() {
    // assuming you have set these variables in the current scope.
    updateStats(strOne, cunOne, agilOne, wisOne);
});

Answer 2

考慮使用one()代替，后者僅觸發一次事件。

Answer 3

聽起來您真正想做的是在彈出窗口中顯示#overlay_form，然后在關閉時隱藏它。

您可以在呈現HTML時將其添加到頁面中，但不使用顯示。 這樣，您可以在單擊彈出或關閉時簡單地顯示/隱藏。

查看此示例是否具有您想要的行為。

http://jsfiddle.net/qh4eN/1/

<style>
#overlay_form {
    display: none;
}
</style>

<div>
   <span id="pop">pop</span>
   <span id="close">close</span>
    <div id="overlay_form">
        <div id="statsStr">statsStr</div>
        <div id="statsCun">statsCun</div>
        <div id="statsAgil">statsAgil</div>
        <div id="statsWis">statsWis</div>        
    </div>
</div>

<script>
var strOne = "strength";
var cunOne = "constitution";
var agilOne = "agility";
var wisOne = "wisdom";

$("#pop").click(function() {
    $("#statsStr").text(strOne);
    $("#statsCun").text(cunOne);
    $("#statsAgil").text(agilOne);
    $("#statsWis").text(wisOne);
    $("#overlay_form").fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form").fadeOut("slow");
});
</script>