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

Question

我是一个长期的程序程序员，现在分配给一个Web应用程序，并从书中学习jquery。 练习是使用.each()在从4个<div>的行中选择的一个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>

脚本

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

事件示例

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

对象实例

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

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

Answer 2

感谢那些回应。 正如Pamblam指出的那样，我把这个和$（this）混淆了。 我在代码中替换了2行，这更有意义： clicked = $(this)成为clicked = this if ($(this).context === $(clicked).context)成为if (this === clicked)

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

问题描述

2 个解决方案

解决方案1
0 2015-12-30 19:44:19

解决方案2
0 2015-12-30 20:41:05

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

问题描述

2 个解决方案

解决方案1 0 2015-12-30 19:44:19

解决方案2 0 2015-12-30 20:41:05

解决方案1
0 2015-12-30 19:44:19

解决方案2
0 2015-12-30 20:41:05