是否将内容从一个元素切换到下一个元素

Switch content from 1 element to next?

本文关键字：元素 一个 下一个 是否      更新时间：2023-09-26

比方说，我在一个页面上有两个div元素(letdiv1和div2(。我正在动态获取内容。内容是文本，我希望内容以这样的方式填充2个div元素，即当div1空间不足时，内容显示在div2中。打个比方，这就像在笔记本上工作，笔记本的整个表面就是页面，div1和div2分别是左侧和右侧。一旦页面的一面完成，你就转到下一页，以此类推

其中一种方法可以是分割文本，并为每个div设置字数限制，这将导致从div1变为2，依此类推

我看过分页，但这不是我想要的。

但是，有更好的方法来实现这一点吗？也许喜欢使用div元素的高度属性来触发事件或类似的事情？或者有其他建议吗？

您可以使用此示例中的代码，它有4个固定大小的div元素，并排显示(请参阅CSS(，并且在第一个div中包含所有文本。代码将根据需要将文本重新分发给下一个div，以避免溢出：

$(function() {
    // Take all words from first div and let them overflow into any next div
    var allwords = $('div.box').text().split(/'s+/);
    $('div.box').each(function (index, div)  {
        var text = '';
        var $div = $(div);
        var height = Math.round($div.height());
        allwords.slice().some(function (part, i) {
            $div.text(text + (i ? ' ': '') + part); // try, and see what we get
            // Detect overflow: when so, exit loop
            if ($div.prop('scrollHeight') > height) return true;
            text = $div.text();
            allwords.shift();
        });
        // Restore text to last non-overflowing text
        $div.text(text);
    });
});
.box { width:100px; height:100px; border: 1px solid; display: inline-block; float: left }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque dui ut nisl iaculis faucibus. 
Mauris non diam consectetur metus accumsan sollicitudin. Quisque ornare euismod mi.
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

您可以检测div何时溢出，函数如下：

if (
    element.offsetHeight < element.scrollHeight
    || element.offsetWidth < element.scrollWidth
)
{
    // Overflow
}
else
{
    // No overflow
}

您可以创建一个函数，将内容片段从第一个div逐渐分离到第二个div，直到溢出消失。

这是一个奇怪的解决方案，但它有效！我不建议在生产网站上使用它：P

$(function() {
  
  function normalize() {
    
      $('#div2').text('');
      
      while ($('#div1')[0].scrollHeight > $('#div1')[0].clientHeight) {
      // get words of the text
      var words = $('#div1').text().split(' ');
      // get last word
      var lastWord = words.slice(-1);
      // pour it to div2
      $('#div2').text($('#div2').text() + lastWord);
      // remove it from the array
      words.length = words.length - 1;
      // and pour the rest back to div1
      $('#div1').text(words.join(' '));
    }
  }
  
  $('button').click(normalize);
  
  $('textarea').change(function() {
    $('#div1').text($('textarea').val());
  });
  
});
#div1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: block;
  word-break: break-all;
}
#div2 {
  margin-top: 100px;
  width: 100px;
  height: 200px;
  background-color: green;
  display: block;
  word-break: break-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
  aaaa bbbb ccccccccc aaa bbb cccccccccccccc aa bbbbbb cccc aaaaaaaaaaaaaaa bbb ccccc aaaa bbb cccccccc aaaaaaa bbbbbbbbbbbbbbbb ccccc
</textarea>
<button>normalize</button>
<hr>
<div id="div1">
  aaaa bbbb ccccccccc aaa bbb cccccccccccccc aa bbbbbb cccc aaaaaaaaaaaaaaa bbb ccccc aaaa bbb cccccccc aaaaaaa bbbbbbbbbbbbbbbb ccccc
</div>
<div id="div2">
</div>

我将尝试一个回调函数，您可以淡化第一个div，然后调用一个填充第二个div的函数：

           $(".div1").fadeOut(200,callbackFunction(){$(".div2").html("some text")});

此外，您可以像这样修复<textarea maxlength="50"> 的textarea的文本限制

50可以替换为任何数字。即使您需要动态长度，也可以使用JS来实现这一点。

使用JS计数字符数，一旦达到限制，将focus切换到其他textarea。

CCD_ 11或任何这样的MVC将有助于容易地解决这个问题。

相关文章：