1

私はあなたが行っているステップに応じてdivを隠したり表示したりするステップバイステップのシステムを持っています、これがjQueryです：

<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {    

    // prepend a 'previous' button to all form-rows except the first
    $('<button>').addClass('previous').appendTo($('.form-row').not(':first'));

    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();

    // hide on last step
    $('button.next').last().hide();

    // add the submit button to the last form-row
    $('<input>').addClass('submit').prop('type', 'submit').val('My Dashboard').appendTo($('.form-row:last'));


    // handle the previous button, we need to use 'on' here as the
    // previous buttons don't exist in the dom at page load
    $('.form-row').on('click', 'button.previous', function(e) {
        e.preventDefault();
        $(this).parent('div.form-row').hide().prev('div.form-row').show();
    });

    $('button.next').click(function(e) {
        // prevent the next buttons from submitting the form
        e.preventDefault();
        // hide this form-row, and show the next one
        $(this).parent('div.form-row').hide().next('div.form-row').show();
    });    

});
});
</script>

これが私のhtmlです：

<div class="form-row">
  <h2 style="float:left;margin-left:7px;">
    <?php the_title(); ?>
  </h2>
  <h2 style="float:right;"><?php echo $counter; ?> of <?php echo $total; ?></h2>
  <div class="clear"></div>
  <div id="module-area" style="margin-top:0px!IMPORTANT;">
    <div id="modules-top"></div>
    <div id="modules-repeat">
      <p class="training"><?php echo the_sub_field('introduction'); ?></p>
      <?php if(get_sub_field('training_images')): ?>
      <?php while(has_sub_field('training_images')): ?>
      <img class="training" src="<?php echo the_sub_field('image'); ?>" />
      <?php endwhile; ?>
      <?php endif; ?>
      <p class="training"><?php echo the_sub_field('conclusion'); ?></p>
      <button class="next"></button>
      <div class="clear"></div>
    </div>
    <div style="margin-bottom:5px;" id="modules-bottom"></div>
  </div>
</div>

これは、内にいくつかのdivを追加するまで機能していました<div class="form-row">。囲まれたdivも非表示にするにはどうすればよいですか？

4

2 に答える 2

1

parents('div.form-row')の代わりに使用してみてくださいparent('div.form-row')

于 2012-09-26T14:44:35.490 に答える
1

.closest()メソッドを探していると思います。

試す：

$('button.next').click(function(e) {
    e.preventDefault();

    var _parent = $(this).closest('div.form-row');

    _parent.hide();
    _parent.next().show();
});

読みやすくするために、長い jQuery チェーンについては分割するのが好きです。

于 2012-09-26T14:49:49.163 に答える