How can I hide a string and replace it with a view/hide button using jQuery?_问答_开发者

I have a field that is dynamically being filled. I know that the first few words of the string are always going to be:

The order was manually edited:

This is followed by a list of all the edits that was made. This list can be somewhat long sometimes.

I want to hide the list of edits, and replace it with a button that says 'Click to View Edits'. When the user clicks the button it will make the list of edits appear above the button and will change the button text to 'Hide Edits'.

My thought-process was to use a jquery function to find "The order was manually edited:" and then select the rest of the string and save it in开发者_开发百科to a variable, then I need make it hide the complete string and show the above string along with button. When the user clicks the button it will simply toggle the string that was saved into the variable(the list of edits).

The string I am searching in is

.note_message

I am somewhat lost how I can achieve this. I found the :contains selector but I wasn't sure how to select only the list of edits and not the string I am searching for. How can I go about doing what I am trying to do?

If you have control of the output of the page then the best way to do it is just to create a div or span or similar which is what you want to hide.

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

And then you can find this easily with $('#EditsToHide')

http://jsfiddle.net/8q8ds/ is an example of the code you want (probably could be done more stylishly and more neatly but its a proof of concept that shoudl get you thinking in the right direction.

Note I also added in stuff to make it work on non-JS browsers by having CSS hide the button and not the edits and then teh javascript hides the edits and shows the buttons. No JS means it will show the data always rather than have it hidden with no way to get to it. :)

Edit:

To do it without control of the markup you need to add in your own markup. I've done a new fiddle based on the old one here: http://jsfiddle.net/8q8ds/2/. The key new code is:

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

You can see it finds the contents of your "note_message" span (note if there is more than one of these unexpected behaviour may occur). It then chops off the known part to get the unknown part (you may want to do some validation to make sure the bit you chop off was actually what you expected in case of changes to outputted HTML). It then constructs some new HTML with a span to give it the format as described above and then continue as before.

Hope this helps.

Edit 2: Just updated the second jsfiddle since I realised I wasn't dynamically adding the button.

Why not just wrap your edits in some container? Then just hide it using javascript so people without it can enjoy your list of edits too.

Some sample code:

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