Question

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

以下脚本仅检查第一个li，但不检查其他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字体-size会减少。显然，您可以将此值更改为您需要的任何值：

<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计算子元素的数量，然后迭代您的检查条件以获得您拥有的子元素数。

div的幻灯片显示和更新任何div的字体大小

2 个答案: