Fatal编程技术网
  • javascript/
  • Javascript $（此）的行为类似于事件和<；部门>；

Javascript $（此）的行为类似于事件和<；部门>；

javascript jquery

Javascript $（此）的行为类似于事件和<；部门>；,javascript,jquery,Javascript,Jquery,我是一名长期的程序程序员，现在被分配到一个web应用程序中，从一本书中学习jquery。练习是使用.each（）在从4个行中选择的一个div上运行一些代码。我试图存储单击的div对象，然后将其匹配为。每个循环通过4个div 我下面的代码经过反复试验后仍然有效，但同样的$（this）似乎有时指向div对象，有时指向事件对象 你如何解释这种行为 我知道.context不受欢迎。我试过了，但似乎没用。还有什么我应该用的吗 我的主要兴趣是了解发生了什么（问题1），所以如果你能提供一个解释，而不仅仅是一个

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

我下面的代码经过反复试验后仍然有效，但同样的
$（this）
似乎有时指向div对象，有时指向事件对象


  • 你如何解释这种行为
    • 

  • 我知道
    .context
    不受欢迎。我试过了，但似乎没用。还有什么我应该用的吗
    • 
我的主要兴趣是了解发生了什么（问题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

    

    $（文档）.ready（函数（）
{
$（“.guess_box”）。单击（checkForCode）；
函数checkForCode（）
{
var代码_框=2；
var折扣代码=getRandomNum（1100）；
var clicked=$（this）；//调试器说clicked是一个事件对象
var迭代=0；
$（“.guess_box”）。每个（函数（）
{
if（$（this.context==$（clicked.context）//像事件对象一样操作
{  
如果（迭代===代码框）
{
//单击正确的框
$（this）.addClass（“折扣”）；//相同的$（this）的行为类似于
折扣信息=“您的代码：代码”+折扣代码+”
    ”；
返回（假）；
}
} 
其他的
{
如果（迭代===代码框）
{
//如果单击了错误的框，请突出显示正确的框
$（此）.addClass（“无折扣”）；
折扣消息=“对不起，这次不打折”
    ；
返回（假）；
}
}
迭代次数+=1；
});
$（“.guess_box”）.unbind（）；
$（this）.append（discount_msg）；//不用担心这行
}//checkForCode
}); //准备好的

    此
    的上下文取决于其使用位置和方式。如果您的函数被某个事件调用，它将引用该事件的目标，否则它将引用被调用的对象
    
您在控制台中看到的不是
    this
    ，也不是事件对象，而是jQuery对象。如果您想检查
    这个
    ，您需要删除jQuery包装函数
    

    console.log(this);

    

    

    感谢那些回应的人。正如Pamblam所指出的，我混淆了这个和$（这个）。我在代码中替换了两行，这更有意义：

    
单击=$（此）
    变为
    clicked=this
    

    
如果（$（this）.context==$（单击）.context）
    变为
    

    如果（此===单击）
    在解释段落中，“4s”应为“4div”，则两个位置。格式化程序在标记符号之间进行数据转换。“调试器说单击是一个事件对象”-需要详细说明吗？@Amit-看起来是这样的：单击[object（e）]原型[object（e）]上下文[object HtmlDevice]长度1[0][object HtmlDevice]，所以调试器不会说任何关于事件对象的事情，对吗？那是什么调试器？看起来你刚从一个
    警报（）中复制了它。
    谢谢你，帕姆布拉姆，我会试试的。我正在试图理解为什么我可以在同一个$上同时使用.context和.addClass（这一点），除非.context也适用于div对象（或反之亦然）。@Marlin我给你的建议是在进入（相对）高级jQuery之前先阅读一些基本的Javascript教程。
    $
    只是一个名称不同寻常的Javascript函数。它就像其他函数一样。在perens之间放置的任何内容都只是jQuery函数的一个参数。也就是说，您创建的每个jQuery对象都将具有相同的属性和方法。由于这个原因，它们在控制台中看起来也都很相似
    context
    和
    addClass（）
    只是jquery的道具/方法。它们存在并且可以在任何jQuery对象上使用。

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