Question

我有一个带有javascript的HTML页面，隐藏并显示具有给定ID的元素（如下所示）。我还希望它能够更改HTML文本中的单个字符，以便在隐藏文本时显示»字符，当隐藏文本可见时，会显示&#xFE3E字符（与另一个角色，但面朝下）

使用pass »引用元素并将其更改为pass &#xFE3E，我需要做什么？我希望在不知道文本的第一部分是pass的情况下这样做。例如，它也可以是fail。

谢谢， PaulH

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>

Answer 1

有三种主要方法可以做到这一点。

查找并替换

您可以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必须指向要更改的链接：

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

请注意，如果that中的HTML标记必须保留其在JavaScript中附加的expando属性或事件处理程序，则此方法不适用。

仅替换包裹的部分

你会使用类似的东西：

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

然后仅更改内部部分的HTML：

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

请注意，重复的ID无效，因此如果您在页面上有多个这些折叠框，则jQuery等JavaScript库可以帮助按类查找元素：

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

让CSS帮助您

您可以使用CSS content declaration，但更完全兼容（也可能更好看）的方法是使用背景图片（demo）。

以下是更改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>

你会像这样使用CSS：

.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');
}

从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';
    }
}

Answer 2

围绕要显示的角色包裹另一个范围。然后在常规显示/隐藏过程中设置该范围的.innerHTML（）。

您也可以预先编写两个字符，也可以显示/隐藏这些字符。

如果您需要这方面的编码示例，我当然可以提供帮助。

Answer 3

这基本上是你要求的：

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

我在id周围添加了pass »属性，因此更容易引用。

然而，正如其他人所说，jQuery使这更容易。但即使没有jQuery，您也可以通过为打开/关闭案例添加跨度来简化：

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

这消除了对搜索/替换功能的依赖，这可能会或可能不会轻易地与特殊字符一起使用。此外，您可以使用图像轻松替换这些跨度。

使用javascript更改HTML字符

3 个答案:

查找并替换

仅替换包裹的部分

让CSS帮助您