时间戳

首页 > 解决方案 > 比较两个 div 内容并隐藏一个元素

jquery - 比较两个 div 内容并隐藏一个元素

问题描述

如果两个 div 之间的内容相等，我想隐藏要显示的更多文本。如果内容.less-cont和.more-cont相等隐藏.more。请建议

 <div class="row">
                                        <div class="col-md-12"><strong>subject</strong></div>
                                        <div class="disp-cont col-md-auto">
                                             Lorem Ipsum is simply dummy text of the printing an
                                        </div>
                                        <div class="more-cont col-md-auto" style="display:none;">
                                          
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

                                    </div>
                                    <a href="#" class="more col-md-auto">read more</a>
                               
                                <div class="col-md-12">no record</div>
                                
                            </div>

我在下面尝试过，但没有按预期工作

$( ".row" ).each(function( index ) {
var one = $.trim($(this).closest('.more-cont').text());
var two = $.trim($( this ).closest('.disp-cont').text());
 if(one === two){
$(this).closest('.more').hide();
} 

});

标签： jquerytoggle

解决方案

比较text()每个元素的长度。

$('.row').each(function() {
    
  let _this = $(this),
      dispC = _this.children('.disp-cont'),
      moreC = _this.children('.more-cont'),
      moreBtn = _this.children('.more');
      
  if(moreC.text().length > dispC.text().length){
    // add toggle function here
    moreBtn.on('click', function(e) {
      e.preventDefault();
      moreC.slideDown();
      moreBtn.hide();
    });
  } else {
    moreC.show();
    moreBtn.hide();
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Read more example where "more content" has more characters:</h2>
<div class="row">
    <div class="col-md-12"><strong>subject</strong></div>
    <div class="disp-cont col-md-auto">
        Lorem Ipsum is simply dummy text of the printing an
    </div>
    <div class="more-cont col-md-auto" style="display:none;">
        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
    </div>
    <a href="#" class="more col-md-auto">read more</a>
    <div class="col-md-12">no record</div>
</div>

<h2>Read more example where "more content" is equal to "display content"</h2>

<div class="row">
    <div class="col-md-12"><strong>subject</strong></div>
    <div class="disp-cont col-md-auto">
        Lorem Ipsum is simply dummy text of the printing an
    </div>
    <div class="more-cont col-md-auto" style="display:none;">
        Lorem Ipsum is simply dummy text of the printing an
    </div>
    <a href="#" class="more col-md-auto">read more</a>
    <div class="col-md-12">no record</div>
</div>

<h2>Read more example where "more content" is less than "display content"</h2>

<div class="row">
    <div class="col-md-12"><strong>subject</strong></div>
    <div class="disp-cont col-md-auto">
        Lorem Ipsum is simply dummy text of the printing an
    </div>
    <div class="more-cont col-md-auto" style="display:none;">
        Lorem Ipsum is simply dummy text of
    </div>
    <a href="#" class="more col-md-auto">read more</a>
    <div class="col-md-12">no record</div>
</div>

推荐阅读