我在完成这项工作时遇到了困难。我想要实现的是在其顶部显示每个 div 的高度值。我还希望看到这些数字的动画效果,当 div 高度增加时进行计数。到目前为止,每一项都显示相同的值,但没有一个是准确的。 我在 UI 设计中使用此图作为示例,以便在按钮切换时随机生成 div 高度。
与所有其他形式的 Web 编程一样,我对 Jquery 非常陌生,所以我无法假设出了什么问题!
谢谢
HTML:
<div class="statistics" >Statistics</div>
<ul class="statisticsGraph">
<li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
<li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
<li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
<li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
<li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
<li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
<li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
</ul>
CSS:
.statistics {
position: relative;
display: block;
width: 100%;
border-bottom: 1px solid #000;
height: 30px;
background: #fff;
background: #000;
color: #fff;
padding:20px 20px;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
ul.statisticsGraph li {
position: relative;
display: inline-block;
float: right;
width: 10%;
margin: 10px 5px 0 0;
height: 230px;
}
.statLine {
position: absolute;
display: block;
background: red;
width: 5px;
bottom: 0px;
overflow:visible !important;
}
.statCircle {
position: relative;
display: block;
width: 8px;
height:8px;
left: -8px;
border-radius: 50%;
background: yellow;
border: 6px solid red;
}
.number {
position: relative;
display: inline-block;
width: 30px;
height: 15px;
color: #000;
padding: 4px;
font-size: 18px;
top: -60px;
left: -17px;
border-radius: 3px;
border: 1px solid #ffd800;
}
JQUERY:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$('.statistics').on('click',function(){
$('.statLine').each(function(){
var statsValue = $('.statLine').height();
$(this).animate({'height':'0'}, function(){
$(this).animate({'height' : getRandomInt(0,200)});
$('.number').text(statsValue);
});
});
});
实例:
最佳答案
您将获取第一个元素高度的值,并将该数字添加到所有数字字段中。我对您的代码进行了一些修改以解决这些问题。
在这里查看:http://jsfiddle.net/xzLt9/6/
$('.statistics').on('click', function () {
$('.statLine').each(function () {
var height = getRandomInt(0, 200);
$(this).animate({
'height': '0'
}, function () {
$(this).animate({
'height': height
}, function(){
$('.number', this).text(height); // <--- this is the key
});
});
});
});
我标记为“key”的行选择 this
的 .number
后代,而不是全部,并向其中添加高度文本值。
关于jquery - 显示每个div的高度值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24576020/