javascript - "Show More"X按钮后的按钮

Question

这里是fiddle这是我的代码:

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

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

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

<div class="keywordsdiv">
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">CYZ</button></a>
<a href="#"><button class="keywords">RGRDFS</button></a>
<a href="#"><button class="keywords">FVFVV</button></a>
<a href="#"><button class="keywords">FESF</button></a>
</div>

<div class="keywordsdiv">
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">CYZ</button></a>
<a href="#"><button class="keywords">RGRDFS</button></a>
<a href="#"><button class="keywords">FVFVV</button></a>
<a href="#"><button class="keywords">FESF</button></a>
</div>

我希望脚本显示Show More按钮，如果有超过 3 个带有 keywords 的按钮类(class)div与类keywordsdiv ，正如您在 fiddle 中看到的那样

如果我删除<a></a>，则此代码有效代码中的标签

Answer 1

您可以使用 find() 而不是 children() 。因为 keywords 不是 div 的直接子级。

Updated jsfiddle old

$(document).ready(function() {
  $(".keywordsdiv").each(function() {
    $(this).find(".keywords").eq(3).after('<a href="" id="playtrailershowmorebuttons">....Show More</a>'); //add a unique id to link
    $(this).find(".keywords:gt(2)").addClass('hide');
  });
});

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

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

<div class="keywordsdiv">
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">CYZ</button></a>
<a href="#"><button class="keywords">RGRDFS</button></a>
<a href="#"><button class="keywords">FVFVV</button></a>
<a href="#"><button class="keywords">FESF</button></a>
</div>

<div class="keywordsdiv">
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">CYZ</button></a>
<a href="#"><button class="keywords">RGRDFS</button></a>
<a href="#"><button class="keywords">FVFVV</button></a>
<a href="#"><button class="keywords">FESF</button></a>
</div>

已更新

Updated fiddle with latest

1. keywordsdiv 不是 button 的直接父级，因此与 closest() 一起使用并提及父类
2. 并使用 class name 而不是 id 附加 showmore 元素。并在 classname 中单击>
3. 并且仅删除具有相同类名包含元素的classname。它的意思是find('.hide').removeClass('hide')

$(document).ready(function(){
  $( ".keywordsdiv" ).each(function(){
      $(this).find(".keywords").eq(3).after('<a href="" class="playtrailershowmorebuttons">....Show More</a>');//add a unique id to link
      $(this).find(".keywords:gt(2)" ).addClass('hide');
  });
});

$(document).on('click','.playtrailershowmorebuttons',function(e){
  e.preventDefault();
  $(this).closest('.keywordsdiv').find('.hide').removeClass('hide');
	 $(this).addClass('hide');
});

.hide {
  display:none;
}

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

<div class="keywordsdiv">
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>

</div>

<div class="keywordsdiv">
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>
<a href="#"><button class="keywords">ABC</button></a>


</div>