Jquery if/elseif 来回后不隐藏答案

【问题标题】：Jquery if/elseif not hiding after going back and forthJquery if/elseif 来回后不隐藏
【发布时间】：2020-10-10 22:47:57
【问题描述】：

决定开始学习jquery来增强我的html+css。我一直在纠结下面的语句，我试图根据一个人在单选按钮上的选择来隐藏/显示输入字段（单选按钮称为 oneFacesLabel、twoFacesLabel 和 threeFacesLabel）。

在开始时有效，但是一旦显示所有 3 个选项，如果我单击第一个选项，它就不会隐藏其他 2 个。我知道为什么它不会触发，我尝试在每个 if 隐藏之后放置 else选项，但如果之后不能。我有什么选择？

编辑：解释一下，如果用户选择 oneFaceLabel 则 image1 显示，如果他们选择 twofacelabel，则 image1 和 image2 显示，如果他们返回 onefacelabel 则 image2 应该消失

        $(document).ready(function() {
        $('input[type="radio"]').click(function() {
            if ($(this).attr('id') == 'oneFaceLabel') {
                $('#image1').show();
            } else if ($(this).attr('id') == 'twoFacesLabel') {
                $('#image1').show();
                $('#image2').show();
            } else if ($(this).attr('id') == 'threeFacesLabel') {
                $('#image1').show();
                $('#image2').show();
                $('#image3').show();
            } else {
                $('#image1').hide();
                $('#image2').hide();
                $('#image3').hide();
            }
        });
    });

【问题讨论】：

嗨，您可以先隐藏所有图像，即：$('.someimageclass').hide(); 将其放在if 语句之前并查看一次。
@Swati 嘿，图片一开始就被隐藏了。如果用户选择 oneFaceLabel 然后 image1 显示，我试图完成什么，如果他们选择 twofacelabel，然后 image1 和 image2 显示，如果他们回到 onefacelabel 那么 image2 应该消失

标签： jquery

【解决方案1】：

基本上，我会在根据所选单选按钮显示所选图像之前隐藏所有图像。

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    $('.img').hide(); // Hide all images here
    if ($(this).attr('id') === 'oneFaceLabel') {
      $('#image1').show();
    } else if ($(this).attr('id') === 'twoFacesLabel') {
      $('#image1').show();
      $('#image2').show();
    } else if ($(this).attr('id') === 'threeFacesLabel') {
      $('#image1').show();
      $('#image2').show();
      $('#image3').show();
    }
  });
});

img {
  display: none;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<input type='radio' name='name' id='oneFaceLabel' />1
<br />
<input type='radio' name='name' id='twoFacesLabel' />2
<br />
<input type='radio' name='name' id='threeFacesLabel' />3
<br />
<div style='display: flex'>
<img id='image1' class='img' src='http://placehold.it/100x100'>
&nbsp;
<img id='image2' class='img' src='http://placehold.it/100x100'>
&nbsp;
<img id='image3' class='img' src='http://placehold.it/100x100'>
</div>

【讨论】：

DERP 我发现我的错误是针对标签而不是 img 本身，感谢您的帮助，我在将您的代码与我的代码进行比较时发现了错误

【解决方案2】：

将 Class rdBtn 添加到所有单选按钮，我们将使用它来捕获单选按钮的点击事件

为您的单选按钮添加 value="1", value="2"，这将用于确定单击了哪个值类型的单选按钮

图像{ 显示：无； }

     <input type='radio' name='name' id='oneFaceLabel' class="rdBtn" value="1" />1
     <br />
     <input type='radio' name='name' id='twoFacesLabel' class="rdBtn" value="2" />2
     <br />
     <input type='radio' name='name' id='threeFacesLabel' class="rdBtn" value="3" />3
     <br />
     <div style='display: flex'>
         <img id='image1' class='img' src='http://placehold.it/100x100'>
         &nbsp;
         <img id='image2' class='img' src='http://placehold.it/100x100'>
         &nbsp;
         <img id='image3' class='img' src='http://placehold.it/100x100'>
     </div>
 <script type="text/javascript">
     $(".rdBtn").click(function(){
         /*Lets Hide all the images by class DOm selector*/
         $(".img").hide();

         /*Lets save what value radio button we have pressed*/
         var i = parseInt($(this).val());

         /*now lets start your loop from 1*/
         for(x=1;x<=i;x++)
         {
             $("#image"+x).show();
         }

     })
 </script>

想法是

隐藏所有图片

获取单击的单选按钮的值

循环显示所有图像，直到该值，例如单击数字 2，然后所有图像将被隐藏，循环将从 1 - 2 运行显示 image1 和 image2

非常感谢你学习 jQuery，祝你好运

【讨论】：