显示每个div的高度值

Question

我无法完成这项工作。我想要实现的是在其顶部显示每个 div 的高度值。我还希望看到这些数字动画，当 div 高度增长时计数。到目前为止，它显示的每个值都相同，并且没有一个是准确的。 我只是在 UI 设计中使用这个图表作为示例，以便在按钮切换时随机生成 div 高度。

我对 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;
}

查询：

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

我标记为“键”的行选择了this 的.number 后代，而不是全部，并向其添加高度文本值。

Answer 2

如果您想在动画运行时更新数字，您需要使用step 处理程序。

正如其他人所指出的，您需要在您正在查看的div 中查找.number。

$('.statistics').on('click',function()
{
       $('.statLine').each(function()
         {
             $(this).animate({'height':getRandomInt(0,200)}, {step: function(v)
                {
                    $(this).find('.number').text(Math.round(v));
                }});
         });
});

工作 jsfiddle：http://jsfiddle.net/xzLt9/17/

Answer 3

$('.statLine').height();

这将是

$('.statLine').css('height');

Answer 4

选择所有 div 并循环遍历它们：

$("div").each(function(item){
   $("#storage"+item).val($(this).css("height");
});

您可以将 div 替换为您分配给要包含的所有 div 的类，并且存储类似于文本框，其 id 类似于 storage1、storage2

然后在您选择的情况下将其包装起来 此链接向您展示如何收听 CSS 变化，如 height ： Event detect when css property changed using Jquery

Answer 5

首先，您可以将 var statsValue = $('.statLine').height(); 更改为 var statsValue = $(this).height();，因为在定位所有 statline 类 div 之前，$(this) 是针对每个 div。

Answer 6

在动画之后使用值：

$('.statistics').on('click', function () {
    $('.statLine').each(function () {
        $(this)
            .animate({
                    'height': '0'
                }, 
                function () {
                    $(this)
                        .animate({
                            'height': getRandomInt(0, 200)
                        }, function an(){
                            $(this).children('.number').text($(this).height());
                        });
                });
    });
});

http://jsfiddle.net/xzLt9/12/