单击更改 <span> 的内容

Question

我有一个 <span>，我正在尝试更改点击时的内容。我已经学习了一些教程，但我似乎无法正确理解它，因此它会发生变化。我使用的是 unicode 字符，所以我想我需要使用 .html() 而不是 .text() 但我可能是错的。为什么这不起作用？

这是我正在使用的来源

$(document).ready(function() {
  $(".dropdownheader").click(function() {
    $("#childList").toggle("slow");
    if ($("#droparrow").html() == '&rtrif;') {
      $("#droparrow").html('&dtrif;');
    } else {
      $("#droparrow").html('&rtrif;');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdownheader">Expected Outcomes of a Corporate Course <span id="droparrow">&dtrif;</span></div>
<div id="childList">
  <ul>
    <li>A better relationship with your coworkers.</li>
    <li>A High Trust and open enivornment.</li>
    <li>A safe and fun environment to work in.</li>
  </ul>
</div>

Answer 1

因为这个检查：

 if ($("#droparrow").html() == '&rtrif;')

总是计算错误。一个更好的方法可能是在您的元素上存储一个 data-expanded 属性并使用它来确定是否切换 - 记住每次点击更新数据项。

$(".dropdownheader").click(function() {
    $("#childList").toggle("slow");
    if($("#droparrow").data("expanded") == "1") {
        $("#droparrow").data("expanded","0").html('&dtrif;');
    } else {
        $("#droparrow").data("expanded","1").html('&rtrif;');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdownheader">Expected Outcomes of a Corporate Course <span id="droparrow" data-expanded="1">&rtrif;</span></div>
    <div id="childList">
        <ul>
            <li>A better relationship with your coworkers.</li>
            <li>A High Trust and open enivornment.</li>
            <li>A safe and fun environment to work in.</li>
        </ul>
    </div>

单击更改 <span> 的内容

Change contents of <span> on click

html

javascript

css

jquery

toggle