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

類「進入」和「按鈕」屬於我的CSS文件，而「幻燈片內容」屬於我的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（每塊）是這樣的：

<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，但這裏是它的JIST：

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

這是一個簡單的例子;它假定帖子和按鈕在標記中排序。