jquery - 显示每个div的高度值

Question

我在完成这项工作时遇到了困难。我想要实现的是在其顶部显示每个 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/gundra/xzLt9/4/

Answer 1

您将获取第一个元素高度的值，并将该数字添加到所有数字字段中。我对您的代码进行了一些修改以解决这些问题。

在这里查看: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 后代，而不是全部，并向其中添加高度文本值。