在jQuery中替换HTML实体

Question

我有以下的html代码，其中包含一个带有toggle类的dt标签，里面是一个FAQ问题，然后是一个带有expand类的dd标签，里面是FAQ的答案：

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

这个函数可以展开或折叠FAQ答案。

我真正想做的是在文本展开时，同时用▲上箭头替换▼下箭头。我不想使用图片或sprites。

无论我如何编码/使用slice或substring功能，我到目前为止都未能实现这一点。

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

- Freeway

---

你的第一个问题表达得非常清晰，这在很少见。欢迎来到 StackOverflow！ - BenMorel

把实体放在 span 标签里面。一开始就把两个元素放在那里，并在 dt 上设置一个类，使用 css 可以显示/隐藏它们。 - epascarello

非常感谢您，以及所有那些费心提供优雅解决方案的人，现在我已经可以使用它们了。 - Freeway

Answer 1

将您的箭头放在<i>标签内，以便您可以使用jQuery进行定位：

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

例子:

$(function () {

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

  $('.toggle').click(function() {
    var $expand = $(this).next('.expand');
    var isHidden = $expand.is(':hidden');
    $expand.slideToggle();
    $("i", this).html(isHidden? "▲" : "▼");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
  <dt class="toggle"><i>&#9660;</i> Here is a FAQ 1</dt>
  <dd class="expand">
    <p>1 And here is the answer</p>
  </dd>
  <dt class="toggle"><i>&#9660;</i> Here is a FAQ 2</dt>
  <dd class="expand">
    <p>2 And here is the answer</p>
  </dd>
  <dt class="toggle"><i>&#9660;</i> Here is a FAQ 3</dt>
  <dd class="expand">
    <p>3 And here is the answer</p>
  </dd>
</dl>

- Roko C. Buljan

---

立即生效，解决方案简洁明了。非常感谢。 - Freeway

Answer 2

另一个选择是仅依赖CSS来显示隐藏上下箭头。

$(".toggle").on("click", function () {
    $(this).toggleClass("open");
});

.toggle {
    cursor: pointer;  
}

.toggle > span + span {
  display : none;
}

.toggle.open > span {
  display : none;
}

.toggle.open > span + span {
  display : inline;
}

.toggle + dd.expand { display : none; } 
.toggle.open + dd.expand { display : block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt class="toggle"><span>&#9650</span><span>&#9660;</span> Here is a FAQ</dt>
<dd class="expand">
    <p>And here is the answer</p>
</dd>
</dl>

- epascarello

---

所有这些解决方案都可以正常工作，但是CSS解决方案最为简洁。使用斜体标签的解决方案的问题在于 - 你能相信吗 - 有些字体会将上下箭头变成斜体，使它们看起来很糟糕！ - Freeway

所以在那个解决方案中，你将<i>更改为<span>... ;) - epascarello

没错！当然你需要两个span标签，一个用于上箭头，一个用于下箭头，然后切换隐藏和显示。 - Freeway

Answer 3

您可以使用字符的 Unicode 值替换 HTML 实体。

字符 ▼ 的十进制值为 9660，十六进制值为 25BC。它的 HTML 实体为 ▼，JavaScript 字符串形式为 "\u25BC"。

同样适用于字符 ▲，其十进制值为 9650，十六进制值为 25B2。

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

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

工作示例：

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

    $('.toggle').click(function() {
        var $this = $(this);
        var $expand = $this.next('.expand');
        if ($expand.is(':hidden')) {
            $expand.slideDown();
            $this.text($this.text().replace("\u25BC", "\u25B2"));
        } else {
            $expand.slideUp();
            $this.text($this.text().replace("\u25B2", "\u25BC"));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt class="toggle">&#9660; Here is a FAQ</dt>
<dd class="expand">
    <p>And here is the answer</p>
</dd>
....
</dl>

- BenMorel