@anton99zel

Как переделать код на попроще?

Чекбоксами показываю тот или иной div. Это работает.
Написал, но уверен, что можно JS переписать на более изящный код, а не вот эта "многоэтажка".
Подскажите - как можно изменить JS?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.newtabs div {min-height: 700px;
    border: 2px solid red;
    padding: 10px;
    margin: 20px auto;
    max-width: 1200px;
    min-width: 320px;
    width: auto;
    position: relative;}
</style>
<label><input type="radio" id="rad1" value="1" name="rad" class="rad" checked/> Один</label>
<label><input type="radio" id="rad2" value="2" name="rad" class="rad" /> Два</label>
<label><input type="radio" id="rad3" value="3" name="rad" class="rad" /> Три</label>
<label><input type="radio" id="rad4" value="4" name="rad" class="rad" /> Четыре</label>
<div class="newtabs">
<div class="tabs1">111111111111</div>
<div class="tabs2">222222222222</div>
<div class="tabs3">333333333333</div>
<div class="tabs4">444444444444</div>
</div>
<script>
$('.rad').on('change', function() {
if ($('#rad1').is(':checked')) {
    $('.tabs1').show();
    $('.tabs2').hide();
    $('.tabs3').hide();
    $('.tabs4').hide();
  } 
if ($('#rad2').is(':checked')) {
    $('.tabs1').hide();
    $('.tabs2').show();
    $('.tabs3').hide();
    $('.tabs4').hide();
  } 
if ($('#rad3').is(':checked')) {
    $('.tabs1').hide();
    $('.tabs2').hide();
    $('.tabs3').show();
    $('.tabs4').hide();
  } 
if ($('#rad4').is(':checked')) {
    $('.tabs1').hide();
    $('.tabs2').hide();
    $('.tabs3').hide();
    $('.tabs4').show();
  } 
}).trigger('change');
</script>
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
<label><input type="radio" value="1" data-link='.tabs1' name="rad" class="rad" checked/> Один</label>
<label><input type="radio" value="2" data-link='.tabs2' name="rad" class="rad" /> Два</label>
<label><input type="radio" value="3" data-link='.tabs3' name="rad" class="rad" /> Три</label>
<label><input type="radio" value="4" data-link='.tabs4' name="rad" class="rad" /> Четыре</label>
<div class="newtabs">
<div class="tabs tabs1">111111111111</div>
<div class="tabs tabs2">222222222222</div>
<div class="tabs tabs3">333333333333</div>
<div class="tabs tabs4">444444444444</div>
</div>
<script>
$('.rad').on('change', function() {
  $('.tabs').hide();
  $($(this).data('link')).show();
});
</script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
скрывать по классу, а текущий получать через $(this)
Ответ написан
snpatsev
@snpatsev
Верстальщик
можно обернуть label в какой-нибудь контейнер, например: newtabs-trigger.
Классами управлять состоянием табов.

Вот такую структуру можно сделать:

<div class="newtabs-trigger">
    <label><input type="radio" id="rad1" value="1" name="rad" class="rad" checked /> Один</label>
    <label><input type="radio" id="rad2" value="2" name="rad" class="rad" /> Два</label>
    <label><input type="radio" id="rad3" value="3" name="rad" class="rad" /> Три</label>
    <label><input type="radio" id="rad4" value="4" name="rad" class="rad" /> Четыре</label>
</div>

<div class="newtabs-container">
    <div class="tab is-active">111111111111</div>
    <div class="tab">222222222222</div>
    <div class="tab">333333333333</div>
    <div class="tab">444444444444</div>
</div>


<script>
// отталкиваемся от документа, на случай, если будет ajax-запрос, чтобы скрипт не отвалился
$(document).on('click touch', '.newtabs-trigger label', function () {
       
       //тут мы определяем индекс элемента, по которому пришелся клик
        var index = $(this).index();

         // убираем у всех класс active(в css нужно прописать на класс active нужные свойства)
        $('.newtabs-container .tab').removeClass('is-active');

       // проверяем у каждого .tab индексы и сравниваем с индексом label
        $('.newtabs-container .tab').each(function () {
            if ($(this).index() == index) {
                /* если индексы совпадают, то ставим на .tab класс .is-active и показываем его.
                   Например, на .tab.active стоит display: block, а по умолчанию у блока стоит display: none;) */
                $(this).addClass('is-active');
            }
        });
});
</script>


P.S: Ещё можно допилить в скрипт добавление класса на label
P.P.S: хотел бы увидеть решение от более опытных разрабов + готов к критике)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы