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-showdivにクラスを#child1 - #child15追加して、

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

このように、カウンターは必要なく、div idを連続して配置する必要がないため、dividを構成する方法が増えます。

説明

をクリックするたびに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

カウンター変数を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を次のような変数にする必要があります。これにより、get$('#child' + counter)の値がcounter更新されると別のdivが表示されます。

var counter=1

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

このデモをまとめてお見せします。

于 2012-06-06T16:55:38.200 に答える