(jQuery) 查找和替换特定文本

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 文件，用于控制淡入淡出效果。出于相同目的，ID“revealer”也属于 .js 文件。这个 HTML 被包裹在一个带有“box”类的 div 标签中。这是每个帖子遵循的格式，完全相同的格式和相同的 HTML 元素——每次需要发布公告时，只需将内容放在段落标签之间并发布即可。这就是我的问题所在，因为我找不到仅在单击按钮的帖子中删除“[...]”的方法。我尝试执行以下操作，但结果是删除了多个帖子中的所有“[...]”：

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

总结：

1. 我需要从用户点击的帖子中删除“[...]”文本only（“阅读更多”按钮）。我们的想法是在隐藏内容淡入的同时将其删除。
2. 除了“[...]”的所有个实例之外，我已经能够完成上述操作。我需要通过修改我的 jQuery 代码或 HTML 来完善我的选择。
3. 选项 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 选择所有帖子和所有删除按钮，并通过点击事件将它们链接起来。我已经创建了一个 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('[...]', ''))
        }
    )
}​

这是一个简化的例子；它假定文章和按钮在标记中排序。