div 的幻灯片并更新任何 div 的字体大小

Question

我有一个div的幻灯片。我想更改字体大小，以便文本div 保留在div #column2 内。（PS #column2 在 CSS 中具有固定高度）

下面的脚本只检查第一个 li，而不检查其他的。我怎么能改变它，以便它检查每个 li 的条件。 谢谢！

.HTML

<div class="slide">
  <li>
    <div id="container">
      <div id="column1">
        <img src="img1.jpg" />
      </div>
      <div id="column2">
        <div>
          <span class="comment">Short text</span>
          <span class="name">MyName</span>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div id="container">
      <div id="column1">
        <img src="img1.jpg" />
      </div>
      <div id="column2">
        <div>
          <span class="comment">Long text</span>
          <span class="name">MyName</span>
        </div>
      </div>
    </div>
   </li>
   <li>
    <div id="container">
      <div id="column1">
        <img src="img1.jpg" />
      </div>
      <div id="column2">
        <div>
          <span class="comment">Very Long text</span>
          <span class="name">MyName</span>
        </div>
      </div>
    </div>
  </li>
</div>

JAVASCRIPT

<script>
    $(function() {
            //adjust font
              while( $('.slide #column2 div').height() > $('.slide #column2').height() ) {//check condition
                  $('.slide #column2').css('font-size', (parseInt($('.slide #column2').css('font-size')) - 1) + "px" );//change fot size
              }

         //slideshow
            $('.slide li').hide(); // hide all slides
                  $('.slide li:first-child').show(); // show first slide
                  setInterval(function () {
                        $('.slide li:first-child').fadeOut(500, function () {
                              $(this).next('li').fadeIn(1000).end().appendTo('.slide') });            
                  }, 5000); // slide duration               
      });    
</script> 

Answer 1

我添加了一些逻辑，每次setInterval函数运行时都会执行这些逻辑。此逻辑将检索注释并检查注释的长度。如果长度大于 12，则字体大小减小。显然，您可以将此值更改为所需的任何值：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.slide li').hide();
        $('.slide li:first-child').show();
        setInterval(function () {
            $('.slide li:first-child').fadeOut(500, function () {
                var nextLi = $(this).next('li');
                var comment = $(nextLi).find(".comment");
                var commentLength = $(comment).text().length;
                if (commentLength > 12) {
                    alert('The coming comment is more than 12 characters long -> reduce font size');
                    $(comment).css('font-size', '6px');
                }
                $(this).next('li').fadeIn(1000).end().appendTo('.slide')
            });
        }, 5000); // slide duration               
    });
</script>

只是一个想法：

如果注释大于 X，则可以使用 substring 使注释更短，并将工具提示（当用户将鼠标悬停在注释上时）设置为完整长度注释。这样，您就不会冒着使注释字体太小以至于用户实际上无法阅读它的风险。

只需替换此行：

$(comment).css('font-size', '6px');

有了这个：

var text = $(comment).text().substring(0, 9);
text = text + "...";
$(comment).attr('title', $(comment).text());
$(comment).text(text);

Answer 2

您可以先获取父元素引用，然后使用 ParentNode.childElementCount 计算子元素的数量，然后迭代您拥有的子元素数量的检查条件。