Jquery, если / elseif не скрывается после перехода туда и обратно

ProgramBox

Jquery, если / elseif не скрывается после перехода туда и обратно

Post author:admin
Запись опубликована:7 марта, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Решил начать изучать jquery, чтобы улучшить мой html css. Я разбирался с приведенными ниже инструкциями, я пытаюсь скрыть / показать поля ввода на основе выбора, который пользователь нажимает на переключатель (переключатели называются oneFacesLabel, twoFacesLabel и threeFacesLabel).

Работает в начале, но как только отображаются все 3, если я нажимаю на первый вариант, он не скрывает остальные 2. Я понимаю, почему это не срабатывает, я пытался ставить else после каждого if, чтобы скрыть параметры, но не могу иначе, если после. Какие варианты у меня есть?

РЕДАКТИРОВАТЬ: чтобы объяснить подробнее, если пользователь выбирает 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();
            }
        });
    });

1. Привет, вы можете просто сначала скрыть все изображения, то есть: $('.someimageclass').hide(); поместите это перед if оператором и посмотрите onces.

2. @Swati привет, изображения уже скрыты в начале. чего я пытаюсь добиться, если пользователь выбирает oneFaceLabel, то отображается image1, если они выбирают twofacelabel, то отображаются image1 и image2, если они возвращаются к onefacelabel, то image2 должен исчезнуть

Ответ №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'>
amp;nbsp;
<img id='image2' class='img' src='http://placehold.it/100x100'>
amp;nbsp;
<img id='image3' class='img' src='http://placehold.it/100x100'>
</div>

Ответ №2:

Добавьте класс rdBtn ко всем переключателям, мы будем использовать это для захвата события щелчка для переключателей

Добавьте значение =»1″, значение =»2″ для ваших переключателей, это будет использоваться для определения того, какой переключатель типа значения нажат

img{ отображение: отсутствует; }

      <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'>
         amp;nbsp;
         <img id='image2' class='img' src='http://placehold.it/100x100'>
         amp;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, удачи