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

(jQuery) Find and Replace specific text

本文关键字：文本 替换 jQuery 查找      更新时间：2023-09-26

我有以下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 "揭示者"也属于.js文件。此 HTML 包装在带有"box"类的div 标签中。这是每个帖子遵循的格式，完全相同的格式和相同的HTML元素 - 每次需要发布公告时，只需将内容放在段落标签之间并发布即可。这就是我的问题出现的地方，因为我找不到仅在单击按钮的帖子中删除"[...]"的方法。我尝试执行以下操作，但它导致删除了多个帖子中的所有"[...]"：

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

总结：

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

~提前感谢！

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

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

希望这有帮助。

当你运行页面初始化脚本时，你可以使用 jquery 选择所有帖子和所有删除按钮，并通过它们的点击事件将它们链接起来。 我创建了一个 JSFiddle 示例，但这是它的要点：

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('[...]', ''))
        }
    )
}​

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

相关文章：