Динамическая проверка значения переключателя (вопрос рефакторинга)

Question

Я написал это jsfiddle в основном на примере , найденном здесь .Примеру более 2 лет, поэтому мне было интересно, есть ли более простой способ проверить значение переключателя, чем выполнение операторов if, elseif, else.Мои значения будут disabled, both, footer, header, поэтому с четырьмя не так уж плохо.Я просто пытаюсь научиться писать лучше Javascript.

Html:

<input type="radio" name="rdio" value="1" checked="checked" /> 1
<input type="radio" name="rdio" value="2" /> 2
<input type="radio" name="rdio" value="3" /> 3
<div id="div_1"> Div 1 Content</div>
<div id="div_2"> Div 2 Content</div>
<div id="div_3"> Div 3 Content</div>

Javascript:

$('#div_1,#div_2,#div_3').css('display','none');
$("input[name=rdio]").change(function() {
    if ($("input[name=rdio]:checked").val() == '1') {
        $('#div_1').show();
        $('#div_2,#div_3').hide();

    }
    else if ($("input[name='rdio']:checked").val() == '2') {
        $('#div_2').show();
        $('#div_1,#div_3').hide();
    }
    else {
        $('#div_3').show();
        $('#div_2,#div_1').hide();
    }

    });

JSFiddle для игры с: http://www.jsfiddle.net/bs54j/1/

ОБНОВЛЕНИЕ: пересмотретьвопрос
Итак, я опубликовал это, прежде чем понял, что я на самом деле буду делать, вот обновленная скрипка с фактическим кодом, который я использую: http://jsfiddle.net/BandonRandon/BsupQ/3/

Новый HTML:

<h2> What to show? </h2>
<input type="radio" name="show_custom_header_footer" value="disabled" checked="checked" /> Disabled
<input type="radio" name="show_custom_header_footer" value="both" /> Both
<input type="radio" checked name="show_custom_header_footer" value="header" /> Header
<input type="radio" name="show_custom_header_footer" value="footer" /> Footer
   <div id="header_footer_options">
       This is the main content div of all the options
       <p id="custom_header">Custom Header:<br/> <textarea rows="2" cols="100" name="custom_header"> Custom Header Code</textarea></p>

       <p id="custom_footer">Custom Footer:<br/> <textarea rows="2" cols="100" name="custom_footer">Custom Footer Code</textarea></p></div>

Новый Javascript:

 //show hide custom header/footer depending on settings
$('#header_footer_options').hide();
//check status on change
$("input[name='show_custom_header_footer']").change(function() {
    if ($("input[name='show_custom_header_footer']:checked").val() == 'disabled') {
        $('#header_footer_options').fadeOut(500);
    }
    else if ($("input[name='show_custom_header_footer']:checked").val() == 'both') {

        $('#header_footer_options').fadeIn();
        $('#custom_header,#custom_footer').fadeIn();
    }
    else if ($("input[name='show_custom_header_footer']:checked").val() == 'header') {
        $('#header_footer_options').fadeIn();
        $('#custom_header').fadeIn();
        $('#custom_footer').hide();
    }
    else if ($("input[name='show_custom_header_footer']:checked").val() == 'footer') {
        $('#header_footer_options').fadeIn();
        $('#custom_footer').fadeIn();
        $('#custom_header').hide();

    }
    else {
        $('#header_footer_options').hide();
    }
});
//check status on page load
if ($("input[name='show_custom_header_footer']:checked").val() == 'disabled') {
    $('#header_footer_options').hide();
}
else if ($("input[name='show_custom_header_footer']:checked").val() == 'both') {

    $('#header_footer_options').show();
    $('#custom_header,#custom_footer').show();
}
else if ($("input[name='show_custom_header_footer']:checked").val() == 'header') {
    $('#header_footer_options').show();
    $('#custom_header').show();
    $('#custom_footer').hide();
}
else if ($("input[name='show_custom_header_footer']:checked").val() == 'footer') {
    $('#header_footer_options').show();
    $('#custom_footer').show();
    $('#custom_header').hide();

}
else {
    $('#header_footer_options').hide();
} 

Вероятно, самая большая вещь, которая должна быть подвергнута рефакторингу, - это показать / скрыть при загрузке, я чувствую, что у меня есть тонна дополнительного кода дерьма там.Я не ищу раздаточный материал, просто предложение о том, как сделать эту работу лучше / быстрее / сильнее.

Answer 1

В onLoad:

$("input[name=rdio]").change(function(){
    $('#div_1,#div_2,#div_3').hide();
    $('#div_' + $("input[name=rdio]:checked").val()).show();
    }).change();

JSFiddle

---

Обновление

Я бы предложил использовать switch:

switch ($("input[name=rdio]:checked").val()) {
  case 'disabled':
     ...
     break;
  case 'both':
     ...
     break;
}

Answer 2

Я думаю, что с помощью небольшого рефакторинга на стороне html вы можете сделать его более простым и более общим.

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

Например:

<input type="radio" name="show_custom_header_footer" value="" checked="checked" /> Disabled
<input type="radio" id="show_all" name="show_custom_header_footer" value="#custom_header,#custom_footer" /> Both
<input type="radio" name="show_custom_header_footer" value="#custom_header" /> Header
<input type="radio" name="show_custom_header_footer" value="#custom_footer" /> Footer

Таким образом, код javascript проще (и зависит только от атрибута имени, а не от значений):

var $all = $($('#show_all').val());
$('input[name=show_custom_header_footer]').change(function(){
    var $show = $(this.value).show();
    $all.not($show).hide();
});
//initial setup:
$all.not($('input[name=show_custom_header_footer]:checked').val()).hide();

Конечно, вы всегда можете сделать ввод show_all скрытого типа (если вы не хотите, чтобы переключатель отображал все). Вы даже можете включить в него некоторые селекторы для раздражающей рекламы и т. Д.

Это правда, что теперь мы переместили некоторую логику в html, но я думаю, что польза от необходимости менять вещи только в одном месте намного больше.

Теперь, если вы хотите добавить новый div или радио-кнопку, вам нужно изменить только HTML.

Вы можете проверить это здесь .

Answer 3

Это то, что вы имеете в виду?

http://daxpanganiban.com/javascript/get-value-of-radio-button-using-jquery

что-то вроде

<input type="radio" name="sample" value="2" checked="checked" />