0

我有一些 jQuery 动态创建具有由 css 定义的特定形状的 span 元素。跨度元素是在屏幕上的随机 x,y 位置生成的，我用 class=".drawingpix" 定义了它们。一个新的 span 元素与上一个元素相同，只是它的位置每隔一两秒创建一次。我希望能够在单击时为元素设置动画。到目前为止，我只能在单击主体时为所有元素设置动画。

我想要发生的事情：我想在触摸或单击时为元素设置动画，并且只有一个元素。

这让我一无所获：

    $('.drawingpix').click(function () {
    // this is the dom element clicked?????
    var element = this;
    $(this).animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});

这会在主体中使用“drawingpix”类为每个元素设置动画，但在头部则没有。：

    $('body').click(function () {
    // this is the dom element clicked?????
    var element = this;
    $('.drawingpix').animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});

我是 jquery 和 javascript 的新手。在我在这里发布之前，我已经进行了数小时的搜索和尝试不同的事情。

我想我需要一些如何获取我单击的元素的索引并根据索引指定要动画的元素。任何帮助将不胜感激。谢谢！

4

3 回答 3

1

您为什么不尝试委派该事件，看看该方法是否适用于新创建的元素..

 $('body').on('click', '.drawingpix' ,function () {
    // this is the dom element clicked?????
    var element = this;
    $(this).animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});
于 2012-10-02T21:43:02.630 回答
0

我怀疑您遇到了几乎每个新的 jQuery 用户体验的问题。对于大多数事件处理程序，例如click()，您必须等待 DOM 准备好。jQuery 通过jQuery.ready函数让这一切变得非常轻松。该函数希望您将一个函数传递给它，其中包含您希望在 DOM 准备好后调用的代码。因此，例如，您的代码如下所示：

jQuery.ready(function(){
    $('.drawingpix').click(function(){
        // this is the dom element clicked?????
        var element = this;
        $(this).animate({
            height:'250px',
            width:'250px',
            'border-radius':'250px',
            '-moz-border-radius': '250px',
            '-webkit-border-radius': '250px',
            opacity: -0.2,
        }, 3000).fadeOut(0);
    });
});
于 2012-10-02T21:53:51.303 回答
0

你的处理程序的内容没有错click；它应该只适用于被点击的元素。但是，在动态创建元素时，您必须注意一些细微之处。当您设置处理程序时，它们仅适用于当前在 DOM 中的对象。如果您在此之后创建一个新元素，他们将没有点击处理程序，这可能是您遇到的问题。

jQuery 有一个解决方案：live()函数. 这不仅为当前在 DOM 中的元素附加了处理程序，而且将它附加到了所有匹配的未来元素上。所以这正是你所需要的。你只需要像这样修改你的代码：

$('.drawingpix').live('click',function () {
    $(this).animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
        }, 3000).fadeOut(0);    
});

这是一个有效的 jsFiddle：http: //jsfiddle.net/QUFGQ/

于 2012-10-02T21:55:49.063 回答