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

如果要替换exisint 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 website

.append（）

将参数指定的内容插入每个元素的末尾   在匹配元素集合中。

因此，您需要使用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() 来清除以前的数据

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jquery append方法添加多次

3 个答案: