jQuery append方法添加多次

Question

我有兩個按鈕，每個按鈕都有自己的價值。 我單擊按鈕通常顯示％40，但是當我單擊其他按鈕時顯示％40％80而不是％80。

$("#cat1").click(function () {
    $(".yuzde").append(" ");
    $(".neler-biliyorum-grafikhover").css("width", "40%");
    $(".yuzde").append("%40");
});
$("#cat2").click(function () {
    $(".yuzde").append(" ");
    $(".neler-biliyorum-grafikhover").css("width", "40%");
    $(".yuzde").append("%80");
});

HTML是

<div class="neler-biliyorum-grafik">
    <div class="neler-biliyorum-grafikhover">
       <div class="yuzde"></div>
   </div>
</div>

Answer 1

如果要替換現有的HTML而不添加到HTML，請不要使用append使用html() 。 追加將應用於現有部分。

$("#cat1").click(function () {
    $(".neler-biliyorum-grafikhover").css("width", "40%");
    $(".yuzde").html("%40");
});
$("#cat2").click(function () {
    $(".neler-biliyorum-grafikhover").css("width", "40%");
    $(".yuzde").html("%80");
});

Answer 2

從jQuery網站

。附加（）

將參數指定的內容插入到匹配元素集中每個元素的末尾。

因此，您需要使用innerHTML或html而不是append

      $("#cat1").click(function () {
           $(".yuzde")[0].innerHTML=" ";
           $(".neler-biliyorum-grafikhover").css("width", "40%");
           $(".yuzde").html("%40");
      });
      $("#cat2").click(function () {
           $(".yuzde").html(" ");
           $(".neler-biliyorum-grafikhover").css("width", "40%");
           $(".yuzde")[0].innerHTML="%80";
      });

Answer 3

您需要使用html()清除以前的數據

 var $ele = $(".neler-biliyorum-grafikhover"), $show = $(".yuzde"); $("#cat1").click(function() { $ele.css("width", "40%"); $show.html("%40"); }); $("#cat2").click(function() { $ele.css("width", "80%"); $show.html("%80"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="neler-biliyorum-grafik"> <div class="neler-biliyorum-grafikhover"> <div class="yuzde"></div> </div> </div> <button id="cat1">a</button> <button id="cat2">b</button>