Question

点击链接后，我的jQuery代码就会运行。但是，如果我多次单击该链接，代码将重复出现并显示在前面的代码中，我不希望它执行此操作。另外，如果我点击＆＃34;关闭＆＃34;选项，并重新打开它，它将重复。我怎么阻止它这样做？顺便说一句，这是代码：

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

虽然效果很好，但有一个问题。我正在制作的游戏需要＆＃34;＃pop＆＃34;功能每隔一段时间更新一次，以显示您的＆＃34;统计数据＆＃34;是。有没有办法刷新代码，以便它显示更新的变量？

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

听起来你真正想做的就是在pop上显示#overlay_form并将其隐藏起来。

您可以在渲染时将html添加到页面中，但使用display none。这样，只需单击弹出或关闭即可显示/隐藏。

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

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>

如何阻止jQuery页面元素重复？

3 个答案: