如何隱藏一個字符串並使用jQuery替換爲查看/隱藏按鈕？

我有一個動態填充的字段。我知道該字符串的第一句話總是將是：如何隱藏一個字符串並使用jQuery替換爲查看/隱藏按鈕？

順序是手動編輯：

這之後是被做了所有編輯的列表。有時這個列表可能有點長。

我想隱藏編輯列表，並將其替換爲「點擊查看編輯」按鈕。當用戶點擊按鈕時，會使編輯列表出現在按鈕上方，並將按鈕文本更改爲「隱藏編輯」。

我的思考過程是使用jquery函數來查找「訂單已手動編輯：」，然後選擇其餘的字符串並將其保存到一個變量，然後我需要讓它隱藏完整的字符串並顯示上面的字符串和按鈕一起。當用戶點擊按鈕時，它將簡單地切換保存到變量中的字符串（編輯列表）。

我在搜索的字符串是

.note_message

我有點失去了我怎麼能做到這一點。我發現：包含選擇器，但我不知道如何只選擇編輯列表而不是我正在搜索的字符串。我怎麼去做我想做的事？

來源

2010-07-16 zeckdude

有關HTML會有很大幫助一個小樣本。 – 2010-07-16 09:38:47

如果你有對頁面輸出的控制，那麼最好的辦法就是創建一個div或span或類似的東西，這就是你想要隱藏的東西。

<span id="editsToHide">These are my edits</span>

然後你就可以用$('#EditsToHide')

http://jsfiddle.net/8q8ds/很容易發現這是你想要的（或許可以更時尚的完成，更整潔的代碼，但它的概念，shoudl讓你思考的一個證明的例子在正確的方向

注意我還添加了東西，使其在非JS瀏覽器上工作，通過讓CSS隱藏按鈕而不是編輯，然後JavaScript隱藏編輯並顯示按鈕。將始終顯示數據，而不是隱藏起來，無法達到它。:)

編輯：

要做到這一點，而不需要在自己的標記添加標記的控制。我在這裏做了一個新的小提琴：http://jsfiddle.net/8q8ds/2/。關鍵的新代碼：

var messageText = $('.note_message').html() 
var staticText = 'The order was manually edited:<br/>'; 
var dynamicText = messageText.substring(staticText.length-1); 
var newHTML = staticText + '<span id="editsToHide">'+dynamicText+'</span>' 
$('.note_message').html(newHTML);

你可以看到它找到你的「note_message」跨度的內容（注意，如果有這些異常行爲的不止一個，可能會出現）。然後它將已知部分切掉以獲取未知部分（您可能需要進行一些驗證，以確保您切斷的位實際上是您在輸出HTML更改的情況下所期望的）。然後它構造一些帶有span的新HTML，使其具有上述格式，然後像以前一樣繼續。

希望這會有所幫助。

編輯2：剛剛更新了第二的jsfiddle，因爲我意識到我沒有動態地添加按鈕。

來源

2010-07-16 09:47:44 Chris

你的代碼看起來非常好，除非我沒有控制我正在使用的字符串。這就是爲什麼我想選擇字符串「手動編輯訂單：」後的所有文本並將其保存到變量中的原因。我該如何做到這一點？ – zeckdude 2010-07-16 10:19:14

@zeckdude：在這種情況下，我們需要看到更多的頁面結構。您提供給我們的信息可能會讓我們找到從哪裏開始尋找顯示/隱藏的字符串，但目前我們沒有找到如何找到該字符串結尾的信息。向我們展示HTML頁面的這一部分，我們可能會幫助您找到一種定位您想要的方式。 – Chris 2010-07-16 10:39:24

訂單被手動編輯：
編輯列表在這裏，這可能有點長，有時這是一個字符串的html結構的例子。它總是同一類，它始終以該字符串開頭。 – zeckdude 2010-07-16 10:42:27

爲什麼不把你的編輯包裝在一些容器中？然後用javascript隱藏它，這樣沒有它的人可以享受你的編輯列表。

一些示例代碼：

<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $('#edits').css('display', 'none'); 
       $('#show.button').css('display', 'inline'); 
       $('.button').click(
        function() { 
         $('#edits, .button').toggle(); 
        } 
       ); 
      }); 
     </script> 
     <style type="text/css"> 
      .button { 
       display: none; 
      } 
     </style> 
    </head> 
    <body> 
     The order was manually edited: 
     <input type="submit" value="Click to View Edits" id="show" class="button" /> 
     <input type="submit" value="Hide Edits" id="hide" class="button" /> 
     <p id="edits"> 
      Some edits. 
     </p> 
    </body> 
</html>

來源

2010-07-16 09:49:13

如何隱藏一個字符串並使用jQuery替換爲查看/隱藏按鈕？

回答

相關問題