Question

最近，我碰巧来到这个页面我意识到代码的变化发生在这个函数中它从<tr><td>A</td><td>1</td><td style="background-color:#336699"> </td></tr>获取数据。
如果<td>中的数据是整数，则其效果与％给出的效果不同。

如何让它接受整数并提供类似于％的效果？

function viewGraph() {
  $(".column").css("height", "0");
  $("table tr").each(function(index) {
    var ha = $(this).children("td").eq(1).text();
    $("#col" + index)
      .animate({ height: ha }, 1500)
      .html("<div>" + ha + "</div>");
  });
}
$(document).ready(function() {
  viewGraph();
});

https://codepen.io/bobasdasd/pen/bRNzza

Answer 1

此函数获取td内的文本并将列高设置为该文本。因此，如果文字为%，则列高将在%中设置。如果文本只是一个数字，则列高将在px中设置。因此，增加您的数量（将1替换为100或更大），您将看到效果。如果您想将转换号码转换为%，请执行以下操作：

if(ha.indexOf('%')==-1) ha+='%';

Answer 2

function viewGraph() {
  var height = $("#grafico").height() / 4;
  $(".column").css("height", "0");
  $("table tr").each(function(index) {
  var ha = $(this).children("td").eq(1).text();
  $("#col" + index)
    .animate({ height: (+ha ? ha * height : ha ) }, 1500)
    .html("<div>" + ha + "</div>");
  });
}


                                                ---- A poor English speaker

Answer 3

只需将其添加到您的代码中，它应该按您希望的方式工作

if(!ha.includes("%")) {
  ha = ha + "%";
}

应用于您的代码：

function viewGraph() {
  $(".column").css("height", "0");
  $("table tr").each(function(index) {
    var ha = $(this).children("td").eq(1).text();

    // Simply add this.
    if(!ha.includes("%")) {
      ha = ha + "%";
    }

    $("#col" + index)
      .animate({ height: ha }, 1500)
      .html("<div>" + ha + "</div>");
  });
}
$(document).ready(function() {
  viewGraph();
});

希望这会帮助你。

如何在此codepen中更改为整数而不是％

3 个答案: