このcodepenで％の代わりに整数に変更するには

Question

最近、私はこのページに来ています。
私は、この関数でコードの変更が発生することを認識しています。
そして、それは<tr><td>A</td><td>1</td><td style="background-color:#336699">&nbsp;</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

は、単にあなたのコードにこれを追加し、それがあなたのコードに適用される

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

これがうまくいけばうまくいきます。

Answer 2

この関数はtd内のテキストを取得し、設定カラムの高さは、そのテキストに等しいです。したがって、テキストが%の場合、列の高さは%に設定されます。テキストが単なる数値の場合、列の高さはpxに設定されます。だから、あなたの数を増やす（1を100倍またはそれ以上に置き換える）、あなたはその効果を見るでしょう。

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

Answer 3

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