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，您的HTML示例中的范围ID为percentamount，但您在脚本中将其引用为percentageamount：

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

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

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

Ones改变它似乎工作。

DEMO - 改为使用#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;
    }
  };
})();

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

3 个答案: