Question

在我的学校项目中，我正在检查div内的内容是否溢出，如果它溢出，则什么都不做，但如果它没有溢出则不显示Read more链接/按钮。< / p>

这是我的代码，

<div class="hideContent">{{ content }}</div>
<div><a class="showLink" href="#">Read more</a></div>

编辑：

这两个div都在for循环中，所以Content＆amp; Read more在页面上多次显示。

这是css，

.hideContent{
    max-height: 200px;
    overflow: hidden;
}

以下是我如何检查内容是否已溢出。

var getElements = document.querySelectorAll('.hideContent');

Array.from(getElements).forEach(function(element) {
  if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
    // Do Nothing
  } else {

    If content is not overflown then hide the `Read more` Link!

  }
});

如果内容没有溢出，我们如何隐藏Read more链接？谢谢。。

Answer 1

我假设你的脚本代码条件工作正常，所以只需添加else部分： -

$(element).next().find(".showLink").hide();

工作代码段： -

＆＃13;

$(document).ready(function(){
  var getElements = document.querySelectorAll('.hideContent');
  Array.from(getElements).forEach(function(element) {
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
      // Do Nothing
    } else {
      $(element).next().find(".showLink").hide();
    }
  });
});

＆＃13;

.hideContent{
    max-height: 200px;
    overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hideContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

<div><a class="showLink" href="#">Read more</a></div>

<div class="hideContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<div><a class="showLink" href="#">Read more</a></div>

＆＃13;

Answer 2

到目前为止，您的支票很好执行反if条件时，可以丢弃else块。

在vanilla JavaScript / DOM中，可以通过将[element] .hidden属性设置为true来隐藏元素。

下一个（DOM-）元素可以通过[element] .nextElementSibling

获取

＆＃13;

var getElements = document.querySelectorAll('.hideContent');
Array.from(getElements).forEach(function(el) {
    if (el.offsetHeight >= el.scrollHeight && el.offsetWidth >= el.scrollWidth)
        el.nextElementSibling.hidden = true;
});

＆＃13;

.hideContent{
    max-height: 200px;
    max-width: 200px;
    overflow: hidden;
}

＆＃13;

<div class="hideContent" style="background:#bea;">this element don't have a "Read more"-Block</div>
<div><a class="showLink" href="#">Read more</a></div><br>
<div class="hideContent">
    <div style="background:#bada55; width:220px;">This element is to wide, so it shows the "Read more"-Block</div>
</div>
<div><a class="showLink" href="#">Read more</a></div>
<div class="hideContent">
    <div style="background:#bada55; height: 220px;">This element is to high</div>
</div>
<div><a class="showLink" href="#">Read more</a></div>

＆＃13;

如果内容没有溢出，请不要显示更多按钮

2 个答案: