计算换行符数量的函数对 $(window).on('resize') 和 $(document).ready 的作用不同

Question

我有一个函数可以根据 window 的宽度计算 div 中换行符的数量。虽然这些函数放在 $(window).on('resize') 函数中时工作正常，但放在 $(document).ready() 函数中时不起作用。我希望它在页面加载时正常工作，并且 window 调整大小，我如何支持两者？

JSFiddle

Javascript/jQuery:

// functions called in both document.ready() and window.resize

$(document).ready(function(){
  var lineCount = getLineCount();
  postItems(lineCount);
  $('.answer').text("Ready");
});

$(window).on('resize', function(){
    var lineCount = getLineCount();
    postItems(lineCount);
    $('.answer').text("Number of lines: " + lineCount);

});


// calculates the amount of lines required to hold the items
function getLineCount() {
  var lineWidth = $('.line').width();
  var itemWidthSum = 0;
  var lineCount=1;

  $('.item').each(function(index, element) {
      if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = $(element).outerWidth();
      }
  });
  return lineCount;
}


// overlays rows for the amount of linebreaks
function postItems(lineCount){
  var container = $('<div />');;
  for(var i = 1; i <= lineCount; i++) {
    container.append('<div class="line">' + i + '</div>');
  }
  $('.line-wrap').html(container);
}

您会在页面的开头看到它错误地显示了 17 行，然后在您调整大小后它会显示正确的数量。

Answer 1

问题出在getLineCount()的第一行。原来你有

var lineWidth = $('.line').width();

但是您的页面上还不存在带有 class "line" 的元素（因为它们已添加到您的 postItems() 方法中。我将其更改为

var lineWidth = $(".container").width();

相反，现在您的代码应该可以正常工作了。摘录如下：

$(document).ready(function(){
  var lineCount = getLineCount();
  postItems(lineCount);
  $('.answer').text("Ready");
});

$(window).on('resize', function(){
    var lineCount = getLineCount();
    postItems(lineCount);
    $('.answer').text("Number of lines: " + lineCount);
 
});


// calculates the amount of lines required to hold the items
function getLineCount() {
  var lineWidth = $('.container').width();
  var itemWidthSum = 0;
  var lineCount=1;
 
  $('.item').each(function(index, element) {
      if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = $(element).outerWidth();
      }
  });
  return lineCount;
}


// overlays rows for the amount of linebreaks
function postItems(lineCount){
  var container = $('<div />');;
  for(var i = 1; i <= lineCount; i++) {
    container.append('<div class="line">' + i + '</div>');
  }
  $('.line-wrap').html(container);
}

body {
  text-align:center;
}

.answer {
  position: fixed;
  left: 0;
  bottom: 0;
}

.container {
  position: relative;
  width: 50%;
  margin: 0 auto;
  border: 1px solid #e8e8e8;
  display: inline-block;
}

.item {
  height: 50px;
  padding:0 10px;
  background-color: #aef2bd;
  float: left;
  opacity:0.2;
  white-space: nowrap;
}

.line-wrap {
  position: absolute;
  border: 1px solid red;
  width: 100%;
  height: 100%;
  top:0; left: 0;
}

.line {
  height: 50px;
  width: 100%;
  background-color: blue;
  opacity:0.5;
  color: white;
  transition: all 0.5s ease;
}

.line:hover {
  background-color: yellow;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item-wrap">
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
  </div>
  <div class="line-wrap">
    
  </div>
</div>

 <h1 class="answer"></h1>

计算换行符数量的函数对 $(window).on('resize') 和 $(document).ready 的作用不同

Function to count number of line breaks acts differently on $(window).on('resize') and $(document).ready

javascript

jquery

resize