jQuery找出哪个元素$(this)实际上是一个引用

时间:2012-12-10 22:28:24

标签: javascript jquery dom animation

好的,我知道$(this)this对于它的实际含义是什么。但是我正在研究的一个小项目我试图将一些重复代码整合到可重用的函数中。

我有一个函数,我想在同一个父div中为它下面的特定对象设置动画。哪个有效,多数民众赞成确认。但是我有两个事件,我希望从当前触发它。

一个是加载事件,在.ready()上我对符合此要求的元素运行$.each()循环,并且工作正常。要将有问题的元素传递给我使用的函数

单独使用

$(this)作为函数的参数,其中函数接受该参数并根据此项目的规范对其执行。然而,问题来自于我想用于触发此功能的第二个事件。

这是基于每个元素的基于点击的事件。为此,我尝试了.click().live().delegate()他们live()似乎是唯一能识别该对象的东西。我目前在这个项目上坚持使用jQuery 1.4.4。因此我无法使用.on(),或者我也会尝试使用delegate()。我也很困惑为什么click()live()不起作用,只有$('.panels h3').each(function() { accordionUpDown($(this), false); }); 尽管使用DOM渲染元素但是,这与我正在寻找的东西完全不同

底线是,我通过上面提到的循环在这个工作示例中调用我的函数的方式:

$('.panels h3').live('click',function()
{
    accordionUpDown($(this), true);
});

并且这个基于点击的示例不起作用,但人们会认为它应该但不是。

function accordionUpDown(theElem, fx)
{
    //alert('test'+theElem);
    if(theElem.hasClass('active'))
    {
        var $elem = theElem.next('div');
        var elemY = ($elem.children('div').innerHeight()+2);

        if(fx == false)
        {
            $elem.addClass('active').css({height:elemY+'px'});
        }
        else
        {
            $elem.addClass('active').animate({height:elemY+'px'}, 2000);
        }
    }
    if(!theElem.hasClass('active'))
    {
        var $elem = theElem.next('div');
        var elemY = '0px';
        if(fx == false)
        {
            $elem.css({height:elemY}).removeClass('active');
        }
        else
        {
            $elem.animate({height:elemY}, 2000).removeClass('active');
        }
    }
}

这里也是函数本身的参考:

$(this)

现在为了节省你们的时间,问为什么我不仅仅使用类似jQuery UI的东西来获得相同的效果,简单地说它是一个样式问题,以及一旦正确就位后计划的一些其他功能。无论哪种情况,定制需求都超越了简单的概念。

无论如何,在点击的情况下,我开始怀疑$(this)是否以某种方式发现错误的东西,如果是,那么也许它不能按预期的原因工作,所以如果是这样的话,我试图找出如何找到{{1}}实际上是

的元素

快速编辑,对于那些想要看到这一切的人,我制作了一个小提琴版。 http://jsfiddle.net/sDeq2/也包含HTML部分

2 个答案:

答案 0 :(得分:0)

你不能打印出id或其他可识别的属性吗?

$(this).attr('id')

答案 1 :(得分:0)

我似乎误解了最初的方法论。我将不得不根据您遇到的问题的描述(.live有效,但.click没有)提出您在DOM实际准备好之前执行代码(在.ready()调用内部)。

所有这三个事件附件方案都适用于脱离上下文。 http://jsfiddle.net/CsP2g/

$(document).ready(function(){
    $('.someClass h3').click(function(){
        alert('fired click event that was bound to multiple items at once using .click()');
    });

    $('.someClass h3').each(function(){
        $(this).click(function(){
          alert('fired click event that was bound to one item at a time using .each and .click()');
        });
    });

    $('.someClass h3').live("click", function(){
        alert('fired click event that was bound to multiple items at once using .live("click", func)');
    });
});