0

我觉得我非常接近完成这个。我有一个带有“添加子项”按钮的表单，按下该按钮会显示一个 div。该表单隐藏了 15 个 div (#child1 - #child15)。我让它只显示第一行（#child1）。

我的问题是，当再次按下按钮时，下一行（#child2、#child3 等）应该会出现，我不知道如何让它显示。我尝试放入柜台，但我是 jQuery 新手，任何帮助将不胜感激。我不认为这是一个困难的问题，只是一个正在逃避我的新手能力的问题。

这是jQuery。如果我需要编辑或添加更多代码来帮助解决问题，请告诉我。提前致谢！

<script type="text/javascript">
var counter=0

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child1').show(function() {
        counter++
        });
      });
    });
</script>
4

6 回答 6

5

children-to-show向您的 div添加一个类#child1 - #child15并编写

<script type="text/javascript">
$(document).ready(function() {
    $('#addChildren').click(function() {
        $('.children-to-show:hidden').first().show();
    });
</script>

这样您就不需要计数器并且 div id 不必连续，因此您有更多方法来配置您的 div id。

解释

每次点击addChildren，都会显示下一个带有类的隐藏元素children-to-show。

编辑

gdoron 是对的，所以如果你想让它与类一起工作：

<script type="text/javascript">
$(document).ready(function() {
    $('#addChildren').click(function() {
        $('.children-to-show').not('.is-visible').first().show().addClass('is-visible');
    });
</script>
于 2012-06-06T16:55:58.523 回答
2

如果<div>s 的顺序为 1,2,3,4...15：

$('#addChildren').click(function() {        
        $('div[id^="child"]').eq(counter).show();
        counter++;
});

如果它们不按顺序排列：

$('#addChildren').click(function() {        
        $('#child' + (++counter)).show();
});
于 2012-06-06T16:55:14.327 回答
1

如果您知道确切的 div 数量，则可以使用 for 循环

$(document).ready(function() {
    $('#addChildren').click(function() {

for (i=1; i<=15; i++)
  {
  $('#child'+i).show();
  }

   });
});
于 2012-06-06T16:54:49.053 回答
1

这应该为你做

<script type="text/javascript">
var counter=1

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
        counter++
        });
      });
    });
</script>

您也可以添加一个条件来检查 15 的限制。就像是 ..

    <script type="text/javascript">
        var counter=1

        $(document).ready(function() {
            $('#addChildren').click(function() {
                if(counter <= 15) {
$('#child' + counter).show(function() {
                counter++
                });
}
              });
            });
        </script>
于 2012-06-06T16:55:14.347 回答
1

您可以将 counter 变量连接到 jQuery 选择器中：

<script type="text/javascript">
var counter=0

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
        counter++
        });
      });
    });
</script>
于 2012-06-06T16:55:33.437 回答
1

您需要使显示变量的 div 像这样，随着值的更新$('#child' + counter)，它将显示不同的 div 。counter

var counter=1

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child' + counter).show(function() {
            counter++
        });
    });
});

我整理了这个演示来向您展示。

于 2012-06-06T16:55:38.200 回答