javascript - 使用 html 数据属性设置要显示的 block 数量

Question

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

我如何通过使用数据属性设置要通过 HTML 显示的 block 数量来更改它

例如

<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) 我如何更改它以反射(reflect) 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 个 block 并且 data-desktop=4，那么在页面加载时我希望显示 4，然后单击“显示更多”显示所有 8 个，然后再次单击“隐藏”显示 4。

Answer 1

您可以将初始切片设置为 $(this).data("desktop") 而不是 3 static。在无显示按钮单击上，您可以将切片设置为 $(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) 而不是 #。