Question

当用户点击load-more按钮时，card-wrapper有class list-view。

我想获得梅森风格的attr值并在其上添加300px并将该值设置为mason div。

这里的问题是我可以获得mason arrt值，但是newheight正在返回“NaN”。

请帮助!!

$('.load-more').on('click', function() {

    if ($('.cards-wrapper').hasClass('list-view')) {

        setTimeout(function() {
            var currentHeight = $('.mason').attr('style');
            console.log('current' + currentHeight);

            var newHeight = parseInt(currentHeight);
            console.log('new height' + newHeight);
            $('.mason').css('height', newHeight + 300);

        }, 3000);

    }
});

<div class="mason clear-fix" style="height: 6380px;">

Answer 1

从schedule(guided)元素获取高度，而不是属性样式。

.mason

Answer 2

您可以使用$('.mason').height()或$('.mason').css("height")来获取元素的高度，同样可以设置元素的新高度

＆＃13;

$('.load-more').on('click', function() {


  setTimeout(function() {
    var currentHeight = $('.mason').height();
    console.log('current ' + currentHeight);

    var newHeight = parseInt(currentHeight);
    console.log('new height ' + (newHeight + 300));
    $('.mason').height((newHeight + 300));

  }, 3000);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="load-more">load more</div>
<div class="mason clear-fix" style="height: 6380px;">

＆＃13;

Answer 3

您可以使用方法jQuery＆＃39; height()来获取/设置div的高度，请参阅以下示例：

＆＃13;

$('.load-more').on('click', function() {

   setTimeout(function() {
        var currentHeight = $('.mason').height()
        console.log('current' + currentHeight);

        var newHeight = parseInt(currentHeight) + 300;
        console.log('new height' + newHeight);
        $('.mason').height(newHeight + 300);

    }, 3000);
});

＆＃13;

.mason {
  background-color: lightgrey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mason clear-fix" style="height: 100px;">
</div>
<input type="button" class="load-more" value="expand">

＆＃13;

注意：您还在控制台中显示currentHeight而不是新的：{/ p>

var newHeight = parseInt(currentHeight);
console.log('new height' + newHeight);

上面的代码打印出currentHeight，您应该执行以下操作：

var newHeight = parseInt(currentHeight) + 300;
console.log('new height' + newHeight);

我希望它可以帮助你，再见。

Answer 4

尝试运行此功能。它正在工作。

＆＃13;

jQuery(document).ready(function(){
    jQuery('.load-more').on('click', function() {

    

        setTimeout(function() {
            var currentHeight = jQuery('.mason')[0].style.height;
            console.log('current' + currentHeight);

            var newHeight = parseInt(currentHeight);
            console.log('new height' + newHeight);
            jQuery('.mason').css('height', newHeight + 300);

        }, 3000);

   
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="mason clear-fix" style="height: 6380px;">

<button class="load-more"></button>

＆＃13;

我刚刚使用jQuery('.mason')[0].style.height;从style属性中获取高度值。我希望这对你有用。

感谢。

获取样式属性值添加“X”并设置新值

4 个答案: