javascript - (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. 我需要从用户点击(“阅读更多”按钮)的帖子中仅删除“[...]”文本。我们的想法是在隐藏内容淡入的同时将其删除。
2. 除了“[...]”的所有 实例，我已经能够完成上述操作。我需要通过修改我的 jQuery 代码或 HTML 来完善我的选择。
3. 选项 3 是去掉这个“[...]”，但我想把它留在那里让用户知道她有更多内容要阅读，我希望有那个“阅读更多”所有帖子中的按钮以保持一致性。

~提前致谢!

Answer 1

首先，您提到您有多个。在那种情况下，这:

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

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

如果你像这样制作你的 HTML(对于每个 block ):

<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/

希望这对您有所帮助。