Если выбрана радиокнопка Показать див - 8 радиокнопок / 8 делений - это можно упростить?

Question

Если выбрана радиокнопка Показать див - 8 радиокнопок / 8 делений - это можно упростить?

В принципе, я хочу 8 радио кнопок. И если выбран один переключатель, то ниже показан div. Если выбрана другая кнопка, отображается другой div. Только один div показывается за раз, и если ни одна кнопка не выбрана (изначально), то никакие div не показываются.

Это мой HTML, который является достаточно стандартным, я не пытаюсь улучшить это для того, что мне нужно.

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop">sim-micro</div>
    <div class="sim-mini-desktop">sim-mini</div>
    <div class="sim-maxi-desktop">sim-maxi</div>
    <div class="sim-mega-desktop">sim-mega</div>
    <div class="phone-smart-micro-desktop">phone-smart-micro</div>
    <div class="phone-smart-mini-desktop">phone-smart-mini</div>
    <div class="phone-smart-desktop">phone-smart</div>
    <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

Однако это мой сценарий, и он кажется довольно беспокойным, и мне интересно, прежде чем я продолжу, есть ли способ сделать это немного проще?

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }     

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }     

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }  

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }  

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }  

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }  

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }  

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }  

          });


});

5

javascript html jquery button radio

Источник

user2492846 06 сен '13 в 10:31

7 ответов

Решение

Вы можете скрыть div элементы, использующие CSS:

.billpay-internet-add-ons div {
  display: none;
}

Тогда вы можете использовать className из target определить, какой div показать, скрывая все sibling элементы:

$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});

Вот скрипка

1

Источник

user1087721 06 сен '13 в 10:43

Вы можете использовать селекторы, чтобы уменьшить количество строк кода здесь.

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

Может быть сокращено до:

$('.billpay-internet-add-ons div').hide();

Это использует родительский элемент для группировки тех элементов, которые вы хотите скрыть, вместо того, чтобы повторять запрос для каждого из них.

Точно так же вы можете использовать ваше соглашение об именах, чтобы сопоставить элементы с элементами для отображения и скрытия - вот полный рабочий пример:

$(document).ready(function(){
    $('.billpay-internet-add-ons div').hide();

    $('form#group').click(function(){
        $('#group input').each(function() {
            var item = $(this);
            var isChecked = item.is(':checked');
            var name = item.attr('class').replace("-btn", "-desktop");

            if (isChecked) {
                $('.' + name).show();
            } else {
                $('.' + name).hide();
            }
        });
    });
});

Этот пример основан исключительно на вашем HTML без каких-либо изменений. Посмотрите, как это работает здесь.

Вы могли бы упростить это далее, если вам не нужно преобразовывать имена. Вы можете использовать атрибут данных вместо изменения имен классов, чтобы сделать это.

0

Источник

user75525 06 сен '13 в 10:40

Используйте атрибут данных html5)(т.е. data-mappingclass), указывающий на соответствующий div, который вам нужно показать. добавить один и тот же класс ко всем переключателям (т.е. radioClass).

HTML

 <label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
 <label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
 ... //same for others

JS

$('.radioClass').click(function() {
  $('.billpay-internet-add-ons div').hide();
  if(this.checked){
     $('.' + $(this).data('mappingclass').show();
  }
});

0

Источник

user1573683 06 сен '13 в 10:41

var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
  $billpay.find("div").hide();
  $billpay.find("div:eq("+$(this).parent().index()+")").show();    
});

http://jsfiddle.net/KaF77/2/

0

Источник

user2587132 06 сен '13 в 10:48

Я упростила это примерно на четыре с тобой. В основном вы смотрите, какой индекс имеет радио, а затем показывает div с тем же индексом. Таким образом, положение div должно соответствовать радио.

Ваш HTML такой же, как и раньше.

Ваш CSS:

.billpay-internet-add-ons > div {
    display:none;
}

Весь ваш Javascript:

$(document).ready(function(){
    $('form#group').click(function(e)
    {
        $('.billpay-internet-add-ons > div').hide();
        $('form#group input[type="radio"]').each(function(index)
        {
            if($(this).is(':checked'))
            {
                $('.billpay-internet-add-ons > div:eq(' + index + ')').show();
            }
        });
    });
});

Демоверсия jsFiddle: http://jsfiddle.net/cfSXY/

0

Источник

user2651036 06 сен '13 в 10:49

Во-первых, вы можете спрятать все по умолчанию (возможно, кроме одной формы), используя CSS, что избавляет от этого:

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

Это отрицательно сказывается на пользователях без JavaScript, если вы беспокоитесь - они никогда не смогут увидеть другие формы.

Затем можно проверить только одно радио, поэтому просто выясните, какое из них оно использует:

$('input[name=group1]:checked);

Но зачем вам это делать, так что у вас есть радио, обработчик щелчков, например:

$('#group input[type="radio"').click(function(){
    //code to show/hide form
});

Теперь у вас есть выбор, как связать свои радиокнопки с различными формами. Одним из способов может быть использование атрибута данных, поэтому вы можете определить свои радиомодули следующим образом:

<label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>

К которому вы можете получить доступ так:

$('input[name=group1]:checked).data("form");

Теперь все, что вам нужно сделать, это скрыть div, который уже показывался, но это может быть достигнуто с помощью аналогичного использования атрибута данных или с помощью :visible селектор.

0

Источник

user2477669 06 сен '13 в 10:42

Другие вопросы по тегам javascript html jquery button radio

user519413 06 сен '13 в 10:39 2013-09-06 10:39 · Accepted Answer · 2013-09-06 10:39

Сначала поместите общие классы на оба radio кнопки и div элементы, которые показывают содержание. В моем примере я использовал trigger а также content соответственно. Затем добавьте data атрибут для радио, чтобы определить, какой div должен быть показан при клике.

Сокращенный пример:

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

Тогда вам нужен только обработчик 1 клика вот так:

$(document).ready(function(){
    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});

Вы также можете использовать CSS, чтобы скрыть div элементы без jQuery - стилизация всегда должна выполняться в CSS, так как это намного лучше разделяет проблемы.

.content {
    display: none;
}

Пример скрипки