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按钮，如果keywords中div类的keywordsdiv类有{3}}个，那么您可以看到这fiddle

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

Answer 1

你可以使用find()代替children()。因为keywords不是直接的孩子。

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不是direct的{​​{1}}家长，请与closest()一起使用并提及父类
2. 并使用button而不是showmore来附加class name元素。并点击id
3. 并删除classname仅包含相同的类名包含element.its表示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;
}

Answer 2

将类关键字分配给链接，而不是按钮：

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

工作小提琴： https://jsfiddle.net/68ksyfhj/10/