Блог

Главная - Вопросы по программированию - Сравните содержимое двух div и скройте элемент

Сравните содержимое двух div и скройте элемент

#jquery #toggle

Вопрос:

Я хочу скрыть текст для чтения, который будет отображаться, если содержимое равнозначно двум разделам. если содержание .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();
} 

});

Комментарии:

1. Вы хотели бы сравнить длину слов с .disp-cont с .more-cont ? Если .more-cont это меньше или такая же длина, как .disp-cont вы хотите отобразить все это вместе, в противном случае вы хотите скрыть .more-cont и показать .more ссылку. Верно?

Ответ №1:

Сравните длину 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>

Комментарии:

1. Это то, что вы ищете?

Метки: