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>');

这个似乎有效（有点），但附加到页面 first不是与之关联的.post页面。.date#clickme

请注意<?php echo $num;?>不是问题，那工作正常，它只是 jquery。

更新：

我发现

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

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

我也有这条线来淡入/淡出消息

$('#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。因此，您可以使用属性 Starts With Selector ( [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>');
});

演示在这里（点击链接）。

更新：

如上面的click示例所示，您不应该将$('#clickme<?php echo $num;?>') 选择器放在click()event 中。这将重新运行选择器（并将返回与单击不同的元素）。在click(), 使用this, 或$(this).

fadeIn要在/之后删除fadeOut，请使用回调函数。如您所见，如果您致电remove()，它将立即删除。回调函数可以添加如下（看最后）：

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

为了更安全，最好保留对添加的 span 的引用并直接调用它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 > remove 就可以了：

$(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花时间帮助我！

于 2013-07-06T04:28:17.127 回答