diplay все элементы на клике с другим сценарием с jquery

У меня есть страница, где у двух разделов есть другой сценарий, в первом случае у меня есть три элемента списка с первым отображением по умолчанию и показать все в режиме просмотра, этот, который я смог сделать, но во втором случае у меня есть тот же раздел, где по умолчанию будут отображаться два элемента списка, а в другом представлении отображаются все элементы списка.

Я хотел логически справиться с этой логикой из одного фрагмента JS-кода логически, но не смог, Надеясь, что кто-то может предложить

РЕДАКТИРОВАТЬ:

  1. Сначала вначале будет отображаться 2 элемента, и в окне просмотра все клики будут загружены все

  2. Второй раздел будет отображать 3 элемента изначально, и при просмотре все клики будут загружать все.

$( document ).ready(function() {
var numOfitem = $(".block__item").length;
var xItem = 2;
$('.block__item:lt('+xItem+')').css('display','block');
$(".view-all > a").click(function(){
        var xItem = (xItem+3 <= numOfitem) ? xItem+3 : numOfitem;
  $('.block__item:lt('+xItem+')').css('display','block');
  $(this).hide();
});
});
body {
  background: #eeeeee;
  padding: 20px;
  font-family: Helvetica;
}
.block__item{padding:5px 0 5px 0; margin-bottom:5px; background:#ffffff; width:300px; display:block; border-bottom:1px solid #ccc; display:none;}
.view-all{margin:10px 0 40px 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Section One Begin -->
<span>total items (2)</span>
<div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="view-all">
   <a href="javascript:;">View All</a>
 </div>

<!-- Section two begin -->
<span>total items (3)</span>
<div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="view-all">
   <a href="javascript:;">View All</a>
 </div>

javascript,jquery,html,css,

0

Ответов: 1

0

Я думаю, вы ищете prevUntil(). prevUntil()получает всех предыдущих братьев и сестер каждого элемента до, но не включает элемент, соответствующий селектору, узлу DOM или объекту jQuery.

Вот пример:

var xItem = 2;
$('.view-all').each(function(){
  $(this).prevUntil('span','.block__item:lt(' + xItem + ')').css('display', 'block');
  var numOfitem = $('.view-all').prevUntil("span", '.block__item').length;
  xItem = (xItem + 3 <= numOfitem) ? xItem + 3 : numOfitem;
});

$(".view-all > a").click(function() {    $(this).parent().prevUntil('span','.block__item').css('display', 'block');
    $(this).hide();
});
body {
  background: #eeeeee;
  padding: 20px;
  font-family: Helvetica;
}
.block__item{padding:5px 0 5px 0; margin-bottom:5px; background:#ffffff; width:300px; display:block; border-bottom:1px solid #ccc; display:none;}
.view-all{margin:10px 0 40px 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Section One Begin -->
<span>total items (2)</span>
<div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="view-all">
   <a href="javascript:;">View All</a>
 </div>

<!-- Section two begin -->
<span>total items (3)</span>
<div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="block__item">
     <div class="bock__item-content">
       This is data
     </div>
 </div>
 <div class="view-all">
   <a href="javascript:;">View All</a>
 </div>

JavaScript, JQuery, HTML, CSS,
Похожие вопросы
Яндекс.Метрика