1

私はこのような構造を持っています:

<div class="post">
 <div class="left">
  <div class="foo"><p><a href="#" id="clickme<?php echo $num;?>">blah</a></p></div>
</div>
<div class="right">
 <div class="text">blah blah blah blah</div>
</div>
 <p class="date">27/12/12</p>
</div>

この構造が繰り返されるため、それぞれ#clickmeの末尾に異なる番号が付けられます

すなわち:#clickme2など#clickme3を使用して#clickme<?php echo $num;?>

私がやろうとしているのは、誰かがクリックし.dateたときに関連するメッセージを表示することです#clickme#clickme

私が試してみました：

$('#clickme<?php echo $num;?>').parent().find('.date').append('<span id="msg">blah blah blah blah</span>');

動作していません。

$('#clickme<?php echo $num;?>').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>');

これは（一種の）動作するようですが、最初にページに追加されます.postは、関連付けられて.dateいるものではありません。#clickme

問題ではないことに注意してください<?php echo $num;?>。問題なく動作しています。jquery だけです。

アップデート：

私はそれを発見しました

$('#clickme<?php echo $num;?>').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>');

動作しますが、3番目の投稿をクリックすると正しく表示されますが、その下の投稿、つまり4番目、5番目をクリックすると、クリックに関連付けられた投稿ではなく、3番目の投稿に追加されます。

メッセージをフェードイン/フェードアウトするためのこの行もあります

$('#msg').fadeIn('fast').delay(1000).fadeOut('fast');

遅れて最後に追加しようとし.remove()ましたが、まったく機能しなくなりました

$('#msg').fadeIn('fast').delay(1000).fadeOut('fast').delay(1000).remove();

完全なコード

$('#clickme<?php echo $num;?>').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>'); $('#msg').fadeIn('fast').delay(1000).fadeOut('fast');

4

2 に答える 2

1

で始まる id を持つすべての要素を一致させたいとしclickmeます。したがって、セレクターで始まる属性 ( [name^="value"])を使用できます。

$('[id^=clickme]').closest('.post').find('.date').append('<span id="alreadyvoted">You already voted for this post</span>');

デモフィドル。

イベントを探している場合は、次のclickことができます。

$('[id^=clickme]').click(function () {
    $(this).closest('.post').find('.date').append('<span id="alreadyvoted"> You already voted for this post</span>');
});

デモはこちら (リンクをクリックしてください)。

アップデート：

上記の例に見られるように、セレクターをeventclick内に配置しないでください。これにより、セレクターが再実行されます (クリックされた要素とは異なる要素が返されます)。の中で、 、またはを使用します。$('#clickme<?php echo $num;?>') click()click()this$(this)

fadeIn/の後を削除するにはfadeOut、コールバック関数を使用します。を呼び出すとremove()、ご覧のとおり、すぐに削除されます。コールバック関数は以下のように追加できます (最後を見てください):

$('#msg').fadeIn('fast').delay(1000).fadeOut('fast').delay(1000, function() { this.remove() });

より安全にするために、追加されたスパンへの参照を保持し、fadeIn/fadeOutなどのセレクターを再利用する代わりに直接呼び出した方がよいでしょう$('#msg'):

$('[id^=clickme]').click(function () {
    var alreadyVotedSpan = $('<span id="msg"> You already voted for this post</span>');
    $(this).closest('.post').find('.date').append(alreadyVotedSpan);
    alreadyVotedSpan.fadeIn('fast').delay(1000).fadeOut('fast').delay(1000, function() { this.remove() });
});

$(this)ここでデモを参照してください (内のの使用に注意してくださいclick())。

于 2013-07-06T00:53:57.063 に答える
0

だから私は、自分が望んでいたものではなく、単純な$('body').append()「フリーサイズ」を作成することに辞任しましたが、後で食べ物がいっぱいになり、落ち着いて休んだ後、電球の瞬間がブームになりました。setTimeout を貼り付ける > それを削除します。

$(function() {
    $('[id^=<?php echo $num;?>]').closest('.post').find('.date').append('<span id="msg">blah blah blah blah</span>');
    $('#msg').fadeIn('fast').delay(2000).fadeOut('fast');

    setTimeout(function() {
      $('#msg').remove();
    }, 3000);
});

これにより、fadeOut の後に追加された元のメッセージ コードが削除され、次のクリックに関連付けられた次の .post .date に再度追加できるようになります。

OPアップデートで言ったように以前に追加しよう.delay(2000).remove();としましたが、それは機能せず、実際には機能しません（なぜこれを覚えていないのですか笑）。

時間を割いて助けてくれたacdcjuniorに感謝します！

于 2013-07-06T04:28:17.127 に答える