Question

我已经编程了几个月，并在这里和那里为一个有API和jQuery的网站制作小脚本。最近我一直在为该网站制作迷你RPG游戏;不幸的是，我并不是最有经验的人。

我遇到了一些.bind（“click”）jQuery事件的问题，主要是一个特殊的，不会停止和无休止地重复。我制作了一些按钮，可以在点击时触发更多功能。我有一种感觉，我可能会无休止地重复两个函数，因为一些console.log消息是无休止地重复，崩溃我正在测试代码的选项卡。我找不到循环的原因。

//#initialFunctions
settingsButton();
menuButton();

//#buttons

function btnCloser(){
  if($('#btn1').length!==0){
    $('#btn1').remove();
    console.log("Btn1 removed.");
  }
  if($('#btn2').length!==0){
    $('#btn2').remove();
    console.log("Btn2 removed.");
  }
  if($('#btn3').length!==0){
    $('#btn3').remove();
    console.log("Btn3 removed.");
  }
}
function buttons3(){
  $('#mainWindow').append('<button id="btn1" type="button" style="position:absolute; top:105px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
  $('#mainWindow').append('<button id="btn2" type="button" style="position:absolute; top:135px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
  $('#mainWindow').append('<button id="btn3" type="button" style="position:absolute; top:165px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
  $('#btn1').hover(function(){$('#btn1').css("cursor","pointer");$('#btn1').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn1').css("cursor","auto");$('#btn1').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  $('#btn2').hover(function(){$('#btn2').css("cursor","pointer");$('#btn2').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn2').css("cursor","auto");$('#btn2').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  $('#btn3').hover(function(){$('#btn3').css("cursor","pointer");$('#btn3').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn3').css("cursor","auto");$('#btn3').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}


//#buttonsUI

function menuButton(){
  $('body').append('<button id="menuBtn" type="button" onclick="menu()" style="position:absolute; top:55px; right:500px; width:100px; height:20px; background-color:black; color:white; opacity: 0.8; border-radius:20px; opacity: 0.8; z-index:100; font-size=200%; color:white; text-align:center;">Menu</button>');
  $('#menuBtn').hover(function(){$('#menuBtn').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#menuBtn').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}

//#menu

maintenanceMode=false;
function menu(){
  $('statWindow').remove();
  if($('#mainWindow').length===0){
    $('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
    $('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
    $('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=170%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">X</div>');
    $('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  }
  btnCloser();
  buttons3();
  $('#btn1').bind("click",console.log("Stats button clicked.")).text('Stats');
  $('#btn2').bind("click",clinic()).text('Clinic');
  $('#btn3').bind("click",mainWindowClose()).text('Close');
}

//#mainUI

notShown=true;
function newWindow(){
  $('#miniGame').remove();
  notShown=false;
  $('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
  $('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
  $('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=200%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">x</div>');
  $('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  //$('#mainWindow').append('<button id="battleButton" type="button" onclick="clinicText()" style="position:absolute; top:160px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;">Battle!</button>');
}
function showAlert(){
  $('body').append('<div id="miniGame" onclick="newWindow()" style="position:absolute; top:55px; right: 350px; height: 20px; width: 20px; background-color: red; border-radius:20px; opacity: 0.8; z-index: 100; font-size=500%; color: solid red; text-align: center;">!</div>');
  $('#miniGame').hover(function(){$('#miniGame').css("cursor","pointer");$('#miniGame').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#miniGame').css("cursor","auto");$('#miniGame').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  notShown=false;
  $('#miniGame').bind("click",monsterEncounter());
}
function mainWindowClose(){
  btnCloser();
  $('#mainWindow').remove();
  $('#closeButton').remove();
  notShown=true;
}

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

似乎我的代码在某种程度上一遍又一遍地重复，我想知道是什么原因。谢谢！

Answer 1

绑定到某个事件时，您需要提供一个function，该事件将在事件发生时执行。您似乎正在传递调用函数的结果。

例如：

$('#btn1').bind("click",console.log("Stats button clicked."))

实际上与

相同

var x = console.log("Stats button clicked.");
$('#btn1').on('click', x);

这可能不是你想要的。

试试这个：

$('#btn1').on('click', function () {
    console.log('Stats button clicked.');
});

很可能你的.hover(处理程序无休止地重复。

此外，尝试打破你的代码并缩进它...很高兴看到它在一行，但它很难遵循。例如，在您的hover函数中，您的javascript无效（可能会在您的控制台中抛出错误）

为什么我的jQuery代码无休止地重复？可能.bind问题？

1 个答案: