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

当同时单击两个提交按钮时，如何在两个图像之间切换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="" />

<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，然后使用下面的代码显示图像 在屏幕上，单击任意按钮：

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

<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();
    }
  });

});

---

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

<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();
    }
  });

});

我想你希望在默认情况下显示第一个图像，然后单击下面的按钮在两个图像之间切换。 下面是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>

<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();
    }
  });

});

$（'#btn1'）。单击（函数（e）{
e、 preventDefault（）；//防止意外提交表单
$（'#img1'）.show（）；
$（'#img2'）.hide（）；
});
$（'#btn2'）。单击（函数（e）{
e、 preventDefault（）；//防止意外提交表单
$（'#img1'）.hide（）；
$（'#img2'）.show（）；
});

进一步简化可能…

最初隐藏两个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();
    }
  });

});

<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();
    }
  });

});

$（文档）.ready（函数（）{
$（':submit'）。单击（函数（e）{
e、 预防默认值（）；
if（$（this.attr（'class'）=='show\u first\u image'）{
$（'.first_image'）.show（）；
$（'.second_image'）.hide（）；
}否则{
$（'.second_image'）.show（）；
$（'.first_image'）.hide（）；
}
});
});

同时单击两个提交按钮？是。我希望两个提交按钮同时单击。如果您有一个表单，如果您尝试同时提交两次会发生什么？谢谢。这正是我想要的。在这两者之间，我需要在单击任何Button之前默认显示第一个图像。怎么做？哦，sry。。。第一个显示：无；只是偶然的。；-）我怎样才能在循环中完成它？我正在使用wordpress帖子，所以循环中的每一篇帖子都应该重复这一点。现在这只是第一篇文章。第二篇文章之后，只会给出第一张图片。你能帮我吗？@Markus Kottländer我怎么能循环完成呢？我正在使用wordpress帖子，所以循环中的每一篇帖子都应该重复这一点。现在这只是第一篇文章。第二篇文章之后，将只给出第一张图片。你能帮我吗？我不是一个真正的wordpress专家，但这是我相信的相关文档。