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 ...显示更多

     

div2

     

Trailer 1 Trailer 2 Trailer HD ...显示更多

     

DIV3

     

Trailer 1 Trailer 2 Trailer HD ...显示更多

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

Answer 1

您可以在每个.C内的3个链接后添加更多节目。此外，当点击显示更多链接时，在其父级内部查找隐藏按钮并显示它们，而不是显示所有隐藏按钮。

.trailerdiv

$(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;
}

Answer 2

我认为这样的事情是可以接受的

＆＃13;

＆＃13;

$(document).ready(function(){     
  $('div').each(function(){
    $(this).children().slice(2).addClass('hide');
  });
  $('div').append('<a href="">....Show More</a>');
});

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

＆＃13;

.hide 
{
  display:none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我改变了什么： 我将hide类添加到每个div中的所有按钮第2位， 并且每个a标记只会打开他的div按钮

您也写了//add a unique id to link，但每个链接都与之前相同，因此它们不是唯一的

Answer 3

您可以使用解决方案https://jsfiddle.net/mcvsbsdy/2/

＆＃13;

＆＃13;

$(document).ready(function(){
  
  $('.trailerdiv').each(function() {
  	$($(this).children()[2]).nextAll().addClass('hide');
  	$($(this).children()[2]).after('<a href="" id="particular">....Show More</a>');
  })
});

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

＆＃13;

.hide 
{
  display:none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

隔离父trailerdiv内的实例。使用父项作为起点，并使用find()或children()仅查看该父项实例。

还需要将#particular更改为某个类，因为ID必须是唯一的

$(document).ready(function() {
  $('.trailerdiv').each(function() {
    // "this" is the instance of "trailerdiv"        
    var $btns = $(this).find("button.playtrailer");
    $btns.eq(2).after('<a href="" class="show-more">....Show More</a>'); //add a unique id to link
    $btns.filter(':gt(2)').addClass('hide');
  });
});

$(document).on('click', 'a.show-more', function(e) {
  e.preventDefault();
  // only remove hide class from this button instance's siblings
  $(this).addClass('hide').siblings().removeClass('hide');

});

的 DEMO