Question

我有这样的结构：

<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的{{1}}页面而不是与.date相关联的页面。

请注意#clickme不是问题，工作正常，只是jquery。

更新

我找到了

<?php echo $num;?>

确实有效，但我说点击它正确显示的第三个帖子，但如果那时我点击下面的任何帖子，即第4个，第5个，它仍然附加到第三个帖子，而不是与点击相关联的帖子。

我也有这条线以及消息输入/输出

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

我已经尝试在延迟之后将$('#msg').fadeIn('fast').delay(1000).fadeOut('fast');添加到结尾，但这会阻止它在所有工作

.remove()

完整代码

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

Answer 1

您希望匹配ID为clickme的每个元素。因此，您可以使用Attribute Starts With Selector ([name^="value"])：

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

Demo fiddle.

如果您正在寻找click事件，可以：

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

Demo here (click on the links).

更新

正如上面的click示例所示，您不应将$('#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() });
});

See demo here (notice the use of $(this) inside the click()).

Answer 2

所以我辞职只是为了创造一个简单的$('body').append()“一个尺寸适合所有”，而不是我想要的但是我走了以后有一些食物后来充满了，平静和休息，然后繁荣的灯泡时刻！坚持一个setTimeout＆gt;删除它：

$(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。

我之前曾尝试添加.delay(2000).remove();，就像我在OP更新中说的那样但是没有用，事实上从来没有（为什么我永远不记得这个大声笑）。

感谢acdcjunior虽然花时间帮助我！

jquery将文本追加到父/子id

2 个答案:

更新