0

cssで定義された特定の形状のスパン要素を動的に作成しているjQueryがいくつかあります。スパン要素は画面上のランダムなx、y位置で生成され、class="。drawingpix"で定義しました。その場所が1〜2秒ごとに作成されることを除いて、最後と同じ新しいスパン要素。クリックしたときに要素をアニメーション化できるようにしたい。これまでのところ、ボディがクリックされたときにすべての要素をアニメーション化することしかできませんでした。

何をしたいのか：タッチまたはクリックしたときに要素をアニメーション化し、その1つの要素のみをアニメーション化します。

これは頭​​の中で私に何も得ません：

    $('.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 に答える