2

我有以下 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 是去掉这个“[...]”，但我想把它留在那里，让用户知道她有更多的内容要阅读，我想拥有那个“阅读更多”按钮帖子的一致性。

〜提前谢谢！

4

2 回答 2

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

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

希望这可以帮助。

于 2012-04-13T01:22:31.240 回答
0

当您运行页面初始化脚本时，您可以使用 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('[...]', ''))
        }
    )
}​

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

于 2012-04-13T01:31:39.433 回答