文章/答案/技术大牛

发布

社区首页 >问答首页 >“显示更多”链接到div内的按钮(多个显示更多按钮)

问“显示更多”链接到div内的按钮(多个显示更多按钮)
EN

Stack Overflow用户

提问于 2017-07-09 13:45:19

回答 3查看 449关注 0票数 1

这是小提琴，这是我的代码：

$(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中的所有按钮只有一个Show More Link。

我希望为每个div提供更多的显示按钮，如下所示：

div1 拖车1拖车2拖车HD...Show更多 div2 拖车1拖车2拖车HD...Show更多 div3 拖车1拖车2拖车HD...Show更多

我想做到这一点，而不改变类(在div和按钮)。我应该在Jquery代码中做哪些修改？

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-07-09 14:01:07

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

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

票数 2

Stack Overflow用户

发布于 2017-07-09 13:57:36

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

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

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

我改变了什么:我将hide类添加到每个div前2中的所有按钮中，而每个a标记只打开其div的按钮

此外，您还编写了//add a unique id to link，但是每个链接都与前面的链接相同，因此它们并不是唯一的。

票数 1

Stack Overflow用户

发布于 2017-07-09 13:58:58

下面是解决方案https://jsfiddle.net/mcvsbsdy/2/

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44997074

复制

相似问题

问“显示更多”链接到div内的按钮(多个显示更多按钮)
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问“显示更多”链接到div内的按钮(多个显示更多按钮)EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问“显示更多”链接到div内的按钮(多个显示更多按钮)
EN