Question

如果同时单击两个提交按钮，如何在两个图像之间切换div元素？我有一个div，当我点击第一个提交按钮然后点击第二个按钮时，第一个图像应该选择。如何使用jquery或js做到这一点？使用wordpress帖子，很少有困惑。

  <div class="first_image" id="1"><?php the_post_thumbnail(); ?></div>
  <div class="second_image" id="2"> 
    <?php if (class_exists('MultiPostThumbnails')) :   MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?></div>

<input type="submit" value="submit" name="" />
<input type="submit" value="submit" name="" />

Answer 1

首先，id属性不能以数字开头。而是使用类似img1的东西来获得有效的HTML。

我想你想要默认显示第一张图片，然后点击下面的按钮在两张图片之间切换。所以这是jQuery方法：

<div class="first_image" id="img1">
    <?php the_post_thumbnail(); ?>
</div>
<div class="second_image" id="img2" style="display: none;">
    <?php
    if (class_exists('MultiPostThumbnails')):
        MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');
    endif;
    ?>
</div>

<input type="submit" value="submit" id="btn1" />
<input type="submit" value="submit" id="btn2" />

<script type="text/javascript">
    $('#btn1').click(function(e) {
        e.preventDefault(); // prevent submitting forms by accident
        $('#img1').show();
        $('#img2').hide();
    });
    $('#btn2').click(function(e) {
        e.preventDefault(); // prevent submitting forms by accident
        $('#img1').hide();
        $('#img2').show();
    });
</script>

进一步简化......

Answer 2

首先使用display:none隐藏两个div，然后使用下面的代码显示图像点击任何按钮：

jQuery('input[type="submit"]').click(function(){
    jQuery('#1').show();
    jQuery('#2').show();
});

Answer 3

最初隐藏两个div

<input type="submit" value="submit" name="" class="show_first_image" />
<input type="submit" value="submit" name="" class="show_second_image" />


$(document).ready(function(){
 $(':submit').click(function(e){
  e.preventDefault();
  if($(this).attr('class') == 'show_first_image'){
   $('.first_image').show();
   $('.second_image').hide();
  }else{
   $('.second_image').show();
   $('.first_image').hide();
    }
  });

});

单击两个提交按钮时如何在两个图像之间切换div元素？

3 个答案: