Question

我有以下HTML代码，它基本上属于一个帖子，我在几行中宣布一些内容，以“[...]”结束，并在“添加更多”链接按钮底部。单击此按钮时，隐藏的其他内容将随着按钮消失而淡入，使得介绍性文本和隐藏的文本保持可见 - 足够简单。现在，我已经为此编写了代码，但是当我尝试还删除那个“[...]”（来自发生了点击按钮的帖子）时，复杂性来了偷看。这是HTML：

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span id="revealer" class="button"><a href="#">Read more</a></span>
</div>

类“entry”和“button”属于我的CSS文件，而“slide-content”属于我的.js文件来控制fadeIn效果。出于同样目的，ID“revealer”也属于.js文件。这个HTML包含在一个带有“box”类的div标签中。这是每个帖子遵循的格式，具有相同HTML格式的完全相同的格式 - 每次需要发布通知时，只需将内容放在段落标记和发布之间。这是我的问题所在，因为我找不到只在点击按钮的帖子中删除“[...]”的方法。我尝试了以下操作，但导致在多个帖子中删除了所有“[...]”：

$('.entry p').each(function() {
    var textReplace = $(this).text();
    $(this).text(textReplace.replace('[...]', '')); 
});

要点：

我需要从用户点击的帖子中删除“[...]”文字（“阅读更多”按钮）。我们的想法是删除它，同时隐藏内容淡入。
我已经能够完成上述操作但是对于所有实例的“[...]”。我需要通过修改我的jQuery代码或HTML来完善我的选择。
选项3是摆脱这个“[...]”，但我想留在那里让用户知道她有更多的内容要阅读，我想有“阅读更多”所有帖子中的按钮都是一致的。

〜提前致谢！

Answer 1

首先，你提到你有多个这些。在这种情况下，这个：

<span id="revealer" class="button"><a href="#">Read more</a></span>

不起作用。 id属性必须是每个文档的唯一属性，即您最多只能有一个具有特定id值的元素。

如果您制作HTML（对于每个块），请执行以下操作：

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span class="revealer button"><a href="#">Read more</a></span>
</div>

和你的JS一样：

function replace(fromp) {
    var textReplace = fromp.text();
    fromp.text(textReplace.replace('[...]', ''));
}

$('.revealer').click(function() {
   var fromp = $(this).siblings().eq(0);
   replace(fromp);
});

它会正常工作。工作示例：

http://jsfiddle.net/G4t7Q/

希望这有帮助。

Answer 2

当您运行页面初始化脚本时，您可以使用jquery选择所有帖子和所有删除按钮，并通过他们的click事件将它们链接起来。我已经创建了一个JSFiddle example，但这里是它的主旨：

var removers = $(".remover")
var posts = $(".post")
for (var i = 0; i < removers.length; i++) {
    $(removers[i]).click( { post: posts[i] },
        function(event) {
            var textReplace = $(event.data.post).text()
            $(event.data.post).text(textReplace.replace('[...]', ''))
        }
    )
}

这是一个简化的例子;它假设帖子和按钮在标记中排序。

（jQuery）查找和替换特定文本

2 个答案: