设置要使用html数据属性显示的块数

时间：2018-10-25 14:34:51

标签： javascript jquery html css

我有一些代码可以在单击时显示和隐藏块。

如何通过使用data属性设置要通过HTML显示的块数来改变这一点

例如

<div class="one cards"data-desktop=4>
<div class="random_cms-class">
  <div class="card">...</div>
</div>
<div class="random_cms-class">
  <div class="card">...</div>
</div>
<div class="random_cms-class">
  <div class="card">...</div>
</div>
<div class="random_cms-class">
  <div class="card">...</div>
</div>
<div class="random_cms-class">
  <div class="card">...</div>
</div>
<div class="random_cms-class">
  <div class="card">...</div>
</div>
<div class="controls">
  <a class="show_more_link" href="#">Show more</a>
  <a class="show_less_link" href="#">Show less</a>
</div>

           ...                 ...                 ...                 ...                 ...                 ...                 显示更多       显示较少     

第一个我想显示4 div，第二个我想显示2。 到目前为止，我的jquery只会显示.slice(3)，如何更改它以反映data-desktop=4 

$( document ).ready(function() {
  cards = $('.cards');
  $.each(cards, function(key,value) {
    $(this)
      .find('.random_cms-class')
      .slice(5)
      .hide(); 
  });
});

$('.show_more_link').click(function() {
  // show all the cards
  // show the "less" link and hide the "more" link
  $(this).parent().parent().find(":hidden").show();
  $(this).siblings().show();
  $(this).hide();
});
$('.show_less_link').click(function() {
  $(this).parent().parent()
    .find('.random_cms-class')
    .slice(3)
    .hide(); 
  $(this).siblings().show();
  $(this).hide();
});
.random_cms-class {
  display: inline-block;  
}

.show_less_link {
  display: none;
}

.card {
  width: 75px;
  height: 75px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="controls">
      <a class="show_more_link" href="#">Show more</a>
      <a class="show_less_link" href="#">Show less</a>
    </div>
</div>

<div class="two cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="controls">
      <a class="show_more_link" href="#">Show more</a>
      <a class="show_less_link" href="#">Show less</a>
    </div>
</div>

请澄清一下，如果有8个块，并且data-desktop = 4，那么在页面加载时，我希望显示4，然后单击“显示更多”显示全部8，然后单击“隐藏”显示4。

2 个答案:

答案 0 :(得分：0)

您可以将初始切片设置为$(this).data("desktop")而不是静态的3。然后，在无显示按钮上单击，可以将切片设置为$(this).parents(".cards").data("desktop")。

我正在读取初始设置和隐藏时的数据值。

检查以下代码段：

$( document ).ready(function() {
  cards = $('.cards');
  $.each(cards, function(key,value) {
    $(this)
      .find('.random_cms-class')
      .slice($(this).data("desktop"))
      .hide(); 
  });
});

$('.show_more_link').click(function() {
  // show all the cards
  // show the "less" link and hide the "more" link
  $(this).parent().parent().find(":hidden").show();
  $(this).siblings().show();
  $(this).hide();
});
$('.show_less_link').click(function() {
  $(this).parent().parent()
    .find('.random_cms-class')
    .slice($(this).parents(".cards").data("desktop"))
    .hide(); 
  $(this).siblings().show();
  $(this).hide();
});
.random_cms-class {
  display: inline-block;  
}

.show_less_link {
  display: none;
}

.card {
  width: 75px;
  height: 75px;
  background-color: green;
}
body{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards" data-desktop="4">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="controls">
      <a class="show_more_link" href="javascript:void(0)">Show more</a>
      <a class="show_less_link" href="javascript:void(0)">Show less</a>
    </div>
</div>

<div class="two cards" data-desktop="2">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="controls">
      <a class="show_more_link" href="javascript:void(0)">Show more</a>
      <a class="show_less_link" href="javascript:void(0)">Show less</a>
    </div>
</div>

更新1：

非常简单，要停止页面，请点击顶部，将href更改为javascript:void(0)，而不是#。

答案 1 :(得分：0)

好吧，所以这使用您的data-desktop想法来确定页面加载时要显示的元素数量。它定义了显示更多和显示更少的单击处理程序，以显示隐藏所需的数字。显示较少也会在页面加载时触发，因此会隐藏额外内容，使它们一开始就不可见。

$(document).ready(function() {
  $('.show_more_link').click(function() {
    $(this).closest('.cards').find('.random_cms-class').show();
    $(this).closest('.cards').find('.show_less_link').show();
  });

  $('.show_less_link').click(function() {
    var $card = $(this).closest('.cards');

    $card.find('.random_cms-class').slice($card.data('desktop')).hide();
    $card.find('.show_less_link').hide();
  }).trigger('click');
});
.random_cms-class {
  display: inline-block;
}

.show_less_link {
  display: none;
}

.card {
  width: 75px;
  height: 75px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards" data-desktop="2">
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="controls">
    <a class="show_more_link" href="#">Show more</a>
    <a class="show_less_link" href="#">Show less</a>
  </div>
</div>

<div class="two cards" data-desktop="3">
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="random_cms-class">
    <div class="card">...</div>
  </div>
  <div class="controls">
    <a class="show_more_link" href="#">Show more</a>
    <a class="show_less_link" href="#">Show less</a>
  </div>
</div>

相关问题
最新问题