在jQuery中替换HTML实体

我有以下html，它是一个dl标记，包含一个带有切换类的dt标记并包含FAQ，然后是一个dd标记，带有一个包含FAQ答案的expand类：

<dl>
<dt class="toggle">&#9660; Here is a FAQ</dt>
<dd class="expand">
    <p>And here is the answer</p>
</dd>
....
</dl>

此函数用于展开或折叠常见问题解答

我真正想做的是另外更换▼ 带箭头的向下箭头▲ 文本展开时的向上箭头。我不想使用图像或精灵

无论我如何尝试编码/使用切片或子字符串函数，到目前为止我都无法实现这一点

---

欢迎发表任何评论，但请友好，因为这是我的第一篇文章。

将您的箭头放在

标记中，以便您可以使用jQuery将其锁定：

$(function () {
    $('.expand').hide();

    $('.toggle').click(function() {
        var $expand = $(this).next('.expand');
        if ($expand.is(':hidden')) {
            $expand.slideDown();
        } else {
            $expand.slideUp();
        }
    });
});

<dt class="toggle"><i>&#9660;</i> Here is a FAQ 1</dt>

▼ 这里是常见问题解答1
下面是答案

▼ 这里是常见问题解答2
下面是答案

▼ 这里是常见问题解答3
下面是答案

您可以用字符的Unicode值代替HTML实体

性格▼ 十进制为

9660

，十六进制为

25BC

。因此，它的HTML实体是

▼，其JavaScript字符串形式为
“\u25BC”

同样的道理也适用于▲, 十进制为
9650
，十六进制为
25B2

因此，您可以将文本字符串中的来回替换为：

.replace("\u25BC", "\u25B2");

工作示例：


$（函数（）{
$（'.expand'）.hide（）；
$（'.toggle'）。单击（函数（）{
var$this=$（this）；
var$expand=$this.next（'.expand'）；
如果（$expand.is（':hidden'））{
$expand.slideDown（）；
$this.text（$this.text（）.replace（“\u25BC”，“\u25B2”）；
}否则{
$expand.slideUp（）；
$this.text（$this.text（）.replace（“\u25B2”，“\u25BC”）；
}
});
});

▼ 这里有一个常见问题
这就是答案

....
另一种选择是依靠CSS显示和隐藏上下箭头


$（“.toggle”）。打开（“单击”，函数（）{
$（此）.toggleClass（“打开”）；
});
.toggle{
光标：指针；
}
.切换>span+span{
显示：无；
}
.toggle.open>span{
显示：无；
}
.toggle.open>span+span{
显示：内联；
}
.toggle+dd.expand{display:none；}
.toggle.open+dd.expand{display:block；}

▲▼ 这里有一个常见问题
这就是答案

您的第一个问题的表述很好，这是非常罕见的。欢迎来到StackOverflow！将图元放置在跨度内。让这两个元素都在那里开始，并在状态上设置一个类，css可以显示/隐藏它们。非常感谢这一点，并感谢所有那些不辞辛劳地提供优雅解决方案的人，我现在可以使用这些解决方案。立即工作，并且是一个很好的干净解决方案。非常感谢。所有这些解决方案都很好，但是css解决方案是最干净的。斜体标记解决方案的问题是——你相信吗——一些字体将上/下箭头斜体化，使它们看起来很糟糕！因此，在该解决方案中，您将更改为跨度…；）确切地当然，您有两个跨度标记，一个用于向上箭头，一个用于向下箭头，只需切换隐藏和显示。