Question

我遇到使用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>

非常感谢任何帮助。

Answer 1

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

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

$('.query').on('click', function() {
    numberCheck(this);
});

Answer 2

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

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

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

Answer 3

将代码修改为

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

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

Answer 4

我认为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));
});

这是fiddle。我希望这有帮助。

函数调用无法使用'click'事件处理程序

4 个答案: