我是一个初学者,我想创建一个大小图表表,可以转换它的度量。即。表数据的值以“英寸”为单位,我希望它在按下按钮时转换为“厘米”。一些表数据的内部 html 写为“1-2”“。我希望两个数字都可以转换为 cm 值,同时保持表的“-”之间。
这是我走了多远。我不知道如何转换数字。
https://jsfiddle.net/zajwgp5r/$(doent).on('click', ' #change', function(e) {
if ($('#converted').is(':checked')) {
$('#data td').html($('#data td').html().replaceAll('"', 'cm'));
$('#change').html('Display in inches');
$('#converted').prop('checked', false);
alert("converting to cm");
} else {
$('#data td').html($('#data td').html().replaceAll('cm', '"'));
$('#converted').prop('checked', true);
$('#change').html('Display in centimeters');
alert("converting to in");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<on type="on" id="change">Display in centimeters</on>
<input type="radio" id="converted" checked="">
<table>
<thead>
<tr>
<th> Size</th>
<th>XS</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
</tr>
</thead>
<tbody id="data">
<tr>
<th>CHEST</th>
<td>32 - 34"</td>
<td>35 - 37"</td>
<td>38 - 40"</td>
<td>41 - 43" </td>
<td>44 - 46"</td>
</tr>
<tr>
<th>WAIST</th>
<td>26 - 28"</td>
<td>29 - 31"</td>
<td>32 - 34"</td>
<td>35 - 37"</td>
<td>38 - 40"</td>
</tr>
<tr>
<th>SEAT / HIP</th>
<td>32 - 34"</td>
<td>35 - 37"</td>
<td>38 - 40"</td>
<td>41 - 43"</td>
<td>44 - 46"</td>
</tr>
<tr>
<th>SLEEVE</th>
<td>24.8"</td>
<td>25.1"</td>
<td>25.6"</td>
<td>26"</td>
<td>26.4"</td>
</tr>
</tbody>
</table>
而不是必须解析单个字符串,为什么不只是将您想要转换的每个数字包装在易于选择的东西中?在这种情况下,我将每个数字放在一个跨度中。那么它就像
$("#data span").each( //Convert the numbers here );
将每个 span 中的 HTML 解析为一个浮点数,然后乘以或除以 2.54 以在 in 和 cm 之间进行转换。
$("#data span").each(function(){
$(this).html(pFloat($(this).html()) * 2.54);
});
最后,您的单位转换有点破。您正在将第一个元素的转换应用于所有元素。使用.each()
单独解析每个
$("#data td").each(function(){
$(this).html($(this).html().replaceAll('"', "cm"));
});
您可能还想将数字如何放回 HTML 的规则。Math.round
或.toFixed(length)
将对此有所帮助。由于这是浮点数学,它有点不准确,当您转换时,您会得到26.0000000004
之类的东西。
$(doent).on('click', ' #change', function(e) {
if($('#converted').is(':checked')) {
$("#data span").each(function(){
$(this).html(pFloat($(this).html()) * 2.54);
});
$("#data td").each(function(){
$(this).html($(this).html().replaceAll('"', "cm"));
});
$('#change').html('Display in inches');
$('#converted').prop('checked', false);
} else {
$("#data span").each(function(){
$(this).html(pFloat($(this).html()) / 2.54);
});
$("#data td").each(function(){
$(this).html($(this).html().replaceAll('cm', '"'));
});
$('#converted').prop('checked', true);
$('#change').html('Display in centimeters');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<on type="on" id="change">
Display in centimeters
</on>
<input type="radio" id="converted" checked="">
<table>
<thead>
<tr>
<th> Size</th>
<th>XS</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
</tr>
</thead>
<tbody id="data">
<tr>
<th>CHEST</th>
<td><span>32</span> - <span>34</span>"</td>
<td><span>35</span> - <span>37</span>"</td>
<td><span>38</span> - <span>40</span>"</td>
<td><span>41</span> - <span>43</span>" </td>
<td><span>44</span> - <span>46</span>"</td>
</tr>
<tr>
<th>WAIST</th>
<td><span>26</span> - <span>28</span>"</td>
<td><span>29</span> - <span>31</span>"</td>
<td><span>32</span> - <span>34</span>"</td>
<td><span>35</span> - <span>37</span>"</td>
<td><span>38</span> - <span>40</span>"</td>
</tr>
<tr>
<th>SEAT / HIP</th>
<td><span>32</span> - <span>34</span>"</td>
<td><span>35</span> - <span>37</span>"</td>
<td><span>38</span> - <span>40</span>"</td>
<td><span>41</span> - <span>43</span>"</td>
<td><span>44</span> - <span>46</span>"</td>
</tr>
<tr>
<th>SLEEVE</th>
<td><span>24.8</span>"</td>
<td><span>25.1</span>"</td>
<td><span>25.6</span>"</td>
<td><span>26</span>"</td>
<td><span>26.4</span>"</td>
</tr>
</tbody>
</table>
</html>
本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处
评论列表(63条)