changing HTML characters with javascript_问答_开发者

I have an HTML page with javascript that hides and shows an element with a given ID (shown below). I would also like it to change a single character in the HTML text such that when the text is hidden a » character is shown and when the hidden text is made visible a &#xFE3E character is shown (same as the other character, but facing downwards)

What do I need to do to reference the element with the pass » and change it to pass &#xFE3E? Preferably, I would like to do this without knowing the first part of the text is pass. It could also be fail, for instance.

Thanks, PaulH

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&开发者_如何学编程gt;
<html>
<head>
    <title></title>
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) 
        {
            var e = document.getElementById(id);
            if(e.style.display == 'block')
            {
                e.style.display = 'none';
            }
            else
            {
                e.style.display = 'block';
            }
        }
    //-->
    </script>
</head>
<body>

    <a href="#" onclick="toggle_visibility('1');"><div class="bar"><span class="foo">pass »</span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div></a>
    <div class="baz" id="1" style='display:none;'>
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
</body>
</html>

There are three main ways to do this.

Find and replace

You can find and replace innerHTML (demo):

function toggle_visibility(that, id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') {
        e.style.display = 'none';
        that.innerHTML = that.innerHTML.replace('\ufe3e', '\u00bb');
    }
    else {
        e.style.display = 'block';
        that.innerHTML = that.innerHTML.replace('\u00bb', '\ufe3e');
    }
}

that must point to the link to be changed:

<a href="#" onclick="toggle_visibility(this, '1');"> ...

Keep in mind that if there is an HTML tag inside that that must keep its expando properties or event handlers attached from within JavaScript, this method is not suitable.

Replace only a wrapped section

You would use something like:

<span class="foo">pass <span id="arrow" class="arrow">»</span></span>

And then change the HTML of the inner section only:

document.getElementById('arrow').innerHTML = '\ufe3e';

Keep in mind that duplicate IDs are invalid, so if you will have more than one of these collapse boxes on the page, a JavaScript library such as jQuery can help find the element by class instead:

var $arrow = $(that).find('.arrow');
$arrow.html($arrow.html().replace('\u00bb', '\ufe3e'));

Have CSS help you

You could use the CSS content declaration, but a more compatible (and possibly nicer looking) way to accomplish your task is to use background images (demo).

Here's how you would change the HTML:

<a href="#" onclick="toggle_visibility(this, '1');"><div class="bar"><span class="foo arrowR">pass</span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div></a>

You would use CSS like this:

.arrowD, .arrowR {
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 16px;
}
.arrowD {
    background-image: url('http://snap.lacounty.gov/Image/DownArrow.png');
}
.arrowR {
    background-image: url('http://snap.lacounty.gov/Image/RightArrow.png');
}

And change the class from JavaScript:

function toggle_visibility(that, id) {
    var e = document.getElementById(id),
        f = that.getElementsByTagName('span')[0];
    if (e.style.display == 'block') {
        e.style.display = 'none';
        f.className = f.className.replace('arrowD', '') + ' arrowR';
    }
    else {
        e.style.display = 'block';
        f.className = f.className.replace('arrowR', '') + ' arrowD';
    }
}

Here is basically what you asked for:

http://jsfiddle.net/jtbowden/C9KYM/

I added an id attribute to the span around pass » so it was easier to reference.

However, as others have stated, jQuery makes this easier. But even without jQuery, you can simplify by adding spans for your open/close cases:

http://jsfiddle.net/jtbowden/4sBLU/

This removes the reliance on search/replace functionality, which may or may not work with special characters easily. In addition, you could easily replace these spans with images.

Wrap another span around the character you want to show. Then set the .innerHTML() of that span during your regular show/hide process.

You could also have both characters prewritten and just show/hide those spans as well.

If you need coded examples of this I can certainly help.