Question

我是一名长期的程序员，现在被分配到一个网络应用程序，并从一本书中学习jquery。练习是使用<div>在一行4 .each()中选择一个div上运行一些代码。我试图存储被单击的div对象，然后将其作为.each循环通过4个div进行匹配。

我的以下代码在试验和错误之后起作用，但同样的$(this)似乎有时指向div对象，有时指向事件对象。

你如何解释这种行为？
我了解.context已被弃用。我试过.target，但这似乎没有用。还有其他我应该使用的东西吗？

我的主要兴趣是了解发生了什么（问题1），所以如果你能提供解释而不仅仅是另一种解决方案（问题2），我真的很感激。先感谢您。以下是代码段：

<body>
    <div id="header">
        <h2>Jump for Joy Sale</h2>
    </div>
    <div id="main">
        <div class="guess_box"><img src="images/jump1.jpg"/></div>
        <div class="guess_box"><img src="images/jump2.jpg"/></div>
        <div class="guess_box"><img src="images/jump3.jpg"/></div>
        <div class="guess_box"><img src="images/jump4.jpg"/></div>
    </div>
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_script.js"></script>
</body>

的Jscript

$(document).ready(function() 
{
    $(".guess_box").click(checkForCode);

    function checkForCode() 
    {
        var code_box = 2;
        var discount_code = getRandomNum(1,100);
        var clicked = $(this);  // debugger says clicked is an event object
        var iteration = 0;

        $(".guess_box").each(function()
        {
            if ($(this).context === $(clicked).context) //act like event objs
            {  
                if (iteration === code_box) 
                {
                    // clicked on correct box
                    $(this).addClass("discount");  //same $(this) acts like <div>
                    discount_msg = "<p>Your Code: CODE"+ discount_code +"</p>";
                    return(false);
                }
            } 
            else 
            {
                if (iteration === code_box) 
                {
                    // if wrong box clicked, highlight the right one
                    $(this).addClass("no_discount");
                    discount_msg = "<p>Sorry, no discount this time</p>";
                    return(false);
                }
            }

            iteration += 1;
        });

        $(".guess_box").unbind();

        $(this).append(discount_msg);  // don't worry about this line
    } //checkForCode
}); //ready

Answer 1

this的上下文取决于它的使用位置和方式。如果你的函数被一个事件调用，它将引用事件的目标，否则它将引用被调用的对象。

您在控制台中看到的不是this，或者是事件对象，它是一个jQuery对象。如果要检查this，则需要删除jQuery包装器函数。

console.log(this);

Event example..

<div>click me</div>

$("div").click(function(){
    // referring to the div itself
    $(this).text("you clicked me");
    // Note you can do it without jQuery as well
    // this.innerHTML = "you clicked me";
});

object example

function something(){
    this.something = "something";
    this.doAThing = function(){
        this.something = "something new";
    }
}

var thing = new something();
thing.doAThing();
alert(thing.something);

Answer 2

感谢那些回复的人。正如Pamblam所指出的那样，我对此和$（这个）感到困惑。我在代码中替换了2行，这更有意义： clicked = $(this)成为clicked = this if ($(this).context === $(clicked).context)变为if (this === clicked)

$（this）就像是事件和<div>

2 个答案: