jquery - 如何使用 Jquery 替换 span 元素中的文本？

Question

我正在尝试将#percent 数量更改为单击的 li 中包含的文本。请有人帮我修复我的代码，谢谢！

<div id="percentchooser">
<ul>
    <li>25</li>
    <li>30</li>
    <li class="selectedpercentage">35</li>
    <li>40</li>
    <li>45</li>
    <li>50</li>
</ul>
<div id="percentage"><span id="percentamount">35</span><span id="percentsign">%</span>

</div>

$("#percentchooser li").click(function () {

    var percentage = $(this).html();

    $("#percentchooser li").removeClass("selectedpercentage");
    $(this).addClass("selectedpercentage");

    $("#percentageamount").html(percentage);


});

Answer 1

您似乎引用了错误的 id，跨度的 id在您的 HTML 示例中，但您在脚本percentamount中引用它：percentageamount

$("#percentchooser li").click(function () {
    var percentage = $(this).html();

    $("#percentchooser li").removeClass("selectedpercentage");
    $(this).addClass("selectedpercentage");

    $("#percentamount").html(percentage);
});

一些改变它似乎工作。

---

演示-#percentamount改为

---

Answer 2

我在这里看不到任何百分比金额，所以我想这应该可以

   $("#percentamount").html(percentage);

Answer 3

您是否考虑过不使用 jQuery？在这种情况下是不必要的：

(function() {
  var chooser = document.getElementById('percentchooser'),
      selected = (function() {
        var li = chooser.children[0].children, len = li.length, i;
        for(i=0;i<l;i++) if(li[i].className == "selectedpercentage") return li[i];
      })(), target = document.getElementById('percentamount');
  chooser.onclick = function(e) {
    e = e || window.event;
    var t = e.srcElement || e.target;
    if( !t.tagName) t = t.parentNode; 
    if( t.tagName.toLowerCase() == "li") {
      selected.className = "";
      t.className = "selectedpercentage";
      target.firstChild.nodeValue = t.firstChild.nodeValue;
    }
  };
})();