3

我在使用 click 事件处理程序执行函数时遇到问题。如果我摆脱函数 numberCheck() 并将代码直接发布到事件处理程序中，那么它可以正常工作。我在这里缺少一些基本的东西吗？

这是我的代码：

jQuery(document).ready(function(){ 
var scopedVariable;
var number = Math.floor(Math.random()*11);
function numberCheck() {
$(this).closest('#outsideContainer').find('.hotter').addClass('hideStuff');
 $(this).closest('#outsideContainer').find('.colder').addClass('hideStuff');
var guess = $(this).closest('#guessContainer').find('.value').val();
    if( +guess === number)
    {
    $(this).closest('#outsideContainer').find('.gotIt').removeClass('hideStuff');
    }
    else {
        $(this).closest('#guessContainer').find('.value').val('Please guess again');
        if(Math.abs(guess - number) < Math.abs(scopedVariable - number)) {
            $(this).closest('#outsideContainer').find('.hotter').removeClass('hideStuff');
            }
        else if(Math.abs(guess - number) > Math.abs(scopedVariable - number)) {
            $(this).closest('#outsideContainer').find('.colder').removeClass('hideStuff');
            }
        scopedVariable = guess;
        } 


}

$('.query').on('click', function() {

        numberCheck();
  }); 
 });

如果需要，这是我的 HTML：

<body>
    <div id="outsideContainer">
    <div id="guessContainer">
        <h3> Guess a number between 1 and 10 </h3>

        <input id="txtfield" name="txtfield" type="text" class="value"/><br>
        <input type = "submit" class="query" />

    </div>
    <div id="guessShow">
        <p class="hotter hideStuff" > Getting Hotter!! </p>
        <p class="colder hideStuff"> Getting Colder, BRRR!!! </p>
        <p class="gotIt hideStuff"> Awesome! You have guessed the number </p>
    </div>
    </div>
    </body>

对此的任何帮助都非常感谢。

4

4 回答 4

5

尝试传递this给您的函数 ( numberCheck(this))，然后将函数中的参数命名为其他this名称，并将函数中的实例更改为该名称，如下所示：

function numberCheck(submitButton) {
    $(submitButton).closest('#outsideContainer').find('.hotter').addClass('hideStuff');
    [...]
}

$('.query').on('click', function() {
    numberCheck(this);
});
于 2013-06-07T15:02:07.323 回答
2

将该函数作为输入参数传递给事件单击，而不是执行该函数。

$('.query').on('click',numberCheck);

通过这种方式，您将 callBack 作为输入参数传递，并且您的函数可以访问触发事件 click 的对象。

于 2013-06-07T15:10:22.877 回答
0

将您的代码修改为

jQuery(document).ready(function(){
   var that = this;
   // the rest of your code

并使用that而不是this内部函数的内部。

于 2013-06-07T14:58:11.610 回答
0

我认为this是一个问题，您应该将其用作参数。请试试这个：（我用.click()代替.on()）

jQuery(document).ready(function(){ 
var scopedVariable;
var number = Math.floor(Math.random()*11);
function numberCheck($this) {
    $this.closest('#outsideContainer').find('.hotter').addClass('hideStuff');
    $this.closest('#outsideContainer').find('.colder').addClass('hideStuff');
    var guess = $this.closest('#guessContainer').find('.value').val();
        if( +guess === number)
        {
        $this.closest('#outsideContainer').find('.gotIt').removeClass('hideStuff');
        }
        else {
            $this.closest('#guessContainer').find('.value').val('Please guess again');
            if(Math.abs(guess - number) < Math.abs(scopedVariable - number)) {
                $this.closest('#outsideContainer').find('.hotter').removeClass('hideStuff');
                }
            else if(Math.abs(guess - number) > Math.abs(scopedVariable - number)) {
                $this.closest('#outsideContainer').find('.colder').removeClass('hideStuff');
                }
            scopedVariable = guess;
            } 


}

$('.query').click(function() {
    //console.log($(this).html());
    numberCheck($(this));
});

这是一个小提琴。我希望这会有所帮助。

于 2013-06-07T16:06:17.403 回答