JavaScript. JQuery переключение и исчезновение - PullRequest
Новая
       39

JavaScript. JQuery переключение и исчезновение

0 голосов
/ 13 марта 2020

Если у вас есть один div с двумя переключателями без идентификаторов, и каждый из них отключает контент и отображает новый контент, если он выбран. Должно быть просто, но не работает должным образом. Когда переключатель переключен, отключите этот контент и добавьте новый контент, и наоборот. Что не так с этим кодом? Разве это не так просто? 

<div class="radios">
                <div class="change__radio">
                    Home: <input name="change" type="radio" value="1" checked="true" />
                    Projects <input name="change" type="radio" value="2" />
                </div> 



 $(":radio").change( function(e) {
            $(".radios__home").toggle().fadeIn(400);
            $(".radios__projects").toggle().fadeIn(400);});

1 Ответ

0 голосов
/ 13 марта 2020

Ваша проблема в том, что .fadeIn всегда делает элемент видимым, независимо от того, что вы делаете с .toggle. Поэтому вам нужно проверить значение проверенного радио и использовать его, чтобы добавить / скрыть соответствующий элемент. Примерно так (но, надеюсь, немного красивее): 

$(":radio").change(function(e) {
  if ($(this).val() == 1) {
    $(".radios__home").fadeIn(400);
    $(".radios__projects").hide();
  } else {
    $(".radios__home").hide();
    $(".radios__projects").fadeIn(400);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radios">
  <div class="change__radio">
    Home: <input name="change" type="radio" value="1" checked="true" /> Projects <input name="change" type="radio" value="2" />All
  </div>



  <div class="radios__home" style="display:block">Home Radio</div>
  <div class="radios__projects" style="display:none">Projects Radio</div>

</div>
...