按变量选择nth-child

Question

我有两个不同班级的div。每个都有一排5个按钮，其中一个是相同的大小。 如果我单击顶行中的按钮，我希望隐藏在他下面的按钮。

$('.top-row .button').click(function(){
    var indexx = $(this).index()+1;
    $(".bottom-row .button:nth-child(indexx)").show().fadeOut(800);    

不幸的是，单击按钮时没有任何反应。

有任何建议吗？

Answer 1

您必须自己构建选择器字符串：

$(".bottom-row .button:nth-child(" + indexx + ")").show().fadeOut(800);    

JavaScript不会查看你的字符串常量，寻找要插入的变量。

Answer 2

变量indexx不会在选择器字符串值本身内进行求值。也就是说，我认为你并不特别需要:nth-child()选择器;相反，您可以使用.eq()并按原样传递索引：

$(".bottom-row .button")
  .eq($(this).index())
  .show()
  .fadeOut(800);