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

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

我标记为＆＃39;关键字＆＃39;选择.number的{{1}}后代，而不是全部，并将高度文本值添加到其中。

Answer 2

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

另外，正如其他人所指出的那样，您需要在.number内寻找div。

$('.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更改： Event detect when css property changed using Jquery

Answer 5

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

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/

显示每个div的高度值

6 个答案: