如何使用jQuery隐藏字符串并将其替换为查看/隐藏按钮？_Jquery_String_Toggle_Contains

如何使用jQuery隐藏字符串并将其替换为查看/隐藏按钮？

jquery string

如何使用jQuery隐藏字符串并将其替换为查看/隐藏按钮？,jquery,string,toggle,contains,Jquery,String,Toggle,Contains,我有一个动态填充的字段。我知道字符串的前几个字总是：订单已手动编辑：随后是所做的所有编辑的列表。这个列表有时可能有点长我想隐藏编辑列表，并将其替换为显示“单击查看编辑”的按钮。当用户单击按钮时，将使编辑列表显示在按钮上方，并将按钮文本更改为“隐藏编辑” 我的想法是使用jquery函数查找“订单已手动编辑”，然后选择字符串的其余部分并将其保存到变量中，然后我需要使其隐藏完整的字符串并显示上面的字符串以及按钮。当用户单击按钮时，它将简单地切换保存到变量中的字符串（编辑列表）我正在搜索的字符串

我有一个动态填充的字段。我知道字符串的前几个字总是：

订单已手动编辑：

随后是所做的所有编辑的列表。这个列表有时可能有点长

我想隐藏编辑列表，并将其替换为显示“单击查看编辑”的按钮。当用户单击按钮时，将使编辑列表显示在按钮上方，并将按钮文本更改为“隐藏编辑”

我的想法是使用jquery函数查找“订单已手动编辑”，然后选择字符串的其余部分并将其保存到变量中，然后我需要使其隐藏完整的字符串并显示上面的字符串以及按钮。当用户单击按钮时，它将简单地切换保存到变量中的字符串（编辑列表）

我正在搜索的字符串是

.note_信息

我有点不知所措，不知如何才能做到这一点。我找到了：contains选择器，但我不确定如何只选择编辑列表，而不是我正在搜索的字符串。我怎样才能开始做我想做的事

如果您可以控制页面的输出，那么最好的方法就是创建一个div或span或类似的内容，这就是您想要隐藏的内容

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

您可以看到它查找您的“note_message”范围的内容（注意，如果可能发生多个此类意外行为）。然后，它切掉已知部分以获得未知部分（您可能需要进行一些验证，以确保切掉的部分实际上是您在更改输出的HTML时所期望的）。然后，它构造一些新的HTML，并带有一个span，为其提供如上所述的格式，然后像以前一样继续

希望这有帮助

编辑2:刚刚更新了第二个JSFIDLE，因为我意识到我没有动态添加按钮。

如果您可以控制页面的输出，那么最好的方法就是创建一个div或span或类似的内容，这就是您想要隐藏的内容

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

希望这有帮助

编辑2:刚刚更新了第二个JSFIDLE，因为我意识到我没有动态添加按钮。

为什么不将编辑内容包装到某个容器中？然后使用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>


$（函数（）{
$（'#edits'）.css（'display'，'none'）；
$（'#show.button'）.css（'display'，'inline'）；
$（'.button'）。单击(
函数（）{
$（'#编辑，.button'）.toggle（）；
}
);
});
.按钮{
显示：无；
}
订单已手动编辑：

一些编辑。

为什么不将编辑内容包装到某个容器中？然后使用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>


$（函数（）{
$（'#edits'）.css（'display'，'none'）；
$（'#show.button'）.css（'display'，'inline'）；
$（'.button'）。单击(
函数（）{
$（'#编辑，.button'）.toggle（）；
}
);
});
.按钮{
显示：无；
}
订单已手动编辑：

一些编辑。

一个带有相关HTML的小示例会有很大帮助。一个带有相关HTML的小示例会有很大帮助。您的代码看起来非常好，只是我无法控制我正在使用的字符串。这就是为什么我要选择字符串“TheOrder was manually edited:”之后的所有文本，并将其保存到变量中。“我怎么能先这么做呢？”@zeckdude:那样的话，我们需要更多地了解你的页面结构。您提供的信息可能允许我们找到从何处开始查找要显示/隐藏的字符串，但我们目前没有关于如何找到该字符串结尾的信息。向我们展示页面这一部分的HTML，我们可能会帮助您找到查找所需内容的方法。顺序是手动编辑的：
编辑列表在这里，有时可能有点长，这是字符串所在HTML结构的一个示例。它总是同一个类，并且总是以该字符串开头。@zeckdude:我已经编辑了我的答案，包括如何处理需要更改初始标记的问题。我希望这对您有所帮助，但请确保您的代码对HTML格式的更改具有防御性，这样，如果页面发生更改，您就不会最终破坏页面。您的代码看起来非常好，只是我无法控制正在使用的字符串。这就是为什么我要选择字符串“TheOrder was manually edited:”之后的所有文本，并将其保存到变量中。“我怎么能先这么做呢？”@zeckdude:那样的话，我们需要更多地了解你的页面结构。您提供的信息可能允许我们找到从何处开始查找要显示/隐藏的字符串，但我们目前没有关于如何找到该字符串结尾的信息。向我们展示页面这一部分的HTML，我们就可以看到了