如何隐藏一个字符串并使用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替换为查看/隐藏按钮？

回答

相关问题