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

Question

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

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

但是您的页面上尚不存在“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>