javascript - "Show More"div 内按钮的链接(多个显示更多按钮)

Question

这是 fiddle这是我的代码:

$(document).ready(function(){
  $( "button.playtrailer" ).eq(2).after('<a href="" id="particular">....Show More</a>');//add a unique id to link
  $( "button.playtrailer:gt(2)" ).addClass('hide');
});

$(document).on('click','a#particular',function(e){
  e.preventDefault();
  $(this).addClass('hide');
  $('button.playtrailer').removeClass('hide');
});

.hide 
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>div1</p>
<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div2</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div3</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

我想要什么？

在这段代码中，div 中的所有按钮只有 1 个Show More Link。

我想为每个 div 显示不同的按钮，像这样:

div1

Trailer 1 Trailer 2 Trailer HD...Show more

div2

Trailer 1 Trailer 2 Trailer HD...Show more

div3

Trailer 1 Trailer 2 Trailer HD...Show more

我想在不更改类(div 和按钮)的情况下执行此操作。我应该在我的 Jquery 代码中进行哪些更改？

Answer 1

您可以在每个 .trailerdiv 内的 3 个链接后添加 show more。此外，当单击显示更多链接时，查找其父项中的隐藏按钮并显示它们，而不是显示所有隐藏按钮。

$(document).ready(function(){
  $( ".trailerdiv" ).each(function(){
      $(this).children(".playtrailer").eq(2).after('<a href="" id="particular">....Show More</a>');//add a unique id to link
      $(this).children(".playtrailer:gt(2)" ).addClass('hide');
  });
});

$(document).on('click','a#particular',function(e){
  e.preventDefault();
  $(this).addClass('hide');
  $(this).parent().children('button.playtrailer').removeClass('hide');
});

.hide 
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>div1</p>
<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div2</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div3</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>