показать/скрыть DIV после кнопки выбранного радио

Question

У меня есть три кнопки радио и DIV после каждого из них, как это:

<input type="radio" name="radios" id="my_radio_1" value="" /> 
<div id="my_radio_1_text" style="display:none;">Content for radio 1</div> 

<input type="radio" name="radios" id="my_radio_2" value="" /> 
<div id="my_radio_2_text" style="display:none;">Content for radio 2</div> 

<input type="radio" name="radios" id="my_radio_3" value="" /> 
<div id="my_radio_3_text" style="display:none;">Content for radio 3</div> 

Как вы можете видеть, дивы изначально скрыты с display:none;. То, что я пытаюсь сделать, - показать div сразу после каждого переключателя при его выборе (и если переключатель не выбран, я хочу скрыть div после него). Я могу показать DIV после радио-кнопки, когда он выбран, делая это:

$(document).on('change', 'input:radio[name=radios]', function(){ 

    $('#' + $(this).attr('id') + '_text').show(); 

}); 

Но я не знаю, как скрыть DIV при выборе другой кнопки радио. Любые идеи, пожалуйста?

Answer 1

Просто скрыть их все перед показом нового:

$(document).on('change', 'input:radio[name=radios]', function(){ 
    $('div[id$="_text"]').hide(); // hide all divs whose id ends in _text 
    $('#' + this.id. + '_text').show(); 
}); 

Если вам не нравится идея сокрытия, а затем показывая, вы можете также использовать

$('div[id$="_text"]').not('#' + this.id. + '_text').hide(); 
$('#' + this.id. + '_text').show(); 

, но нет никаких причин, (экран не отображается до завершения обработчика события).

Answer 2

Вы можете сделать следующее при щелчке по радио.

$(document).on('change', 'input:radio[name=radios]', function(){ 
    $('div[id^="my_radio_"]').hide(); // hide all DIVs begining with "my_radio_" 
    $('#' + $(this).attr('id') + '_text').show(); // show the current one 
}); 

Объяснение

1. Скрыть все дивы с ид начале в "my_radio_"
2. Показать текущие DIV, как вы делаете сейчас

Answer 3

То, что я делаю, это скрыть все divs перед отображением выбранного. Дайте DIVS класс myDiv, и скрыть их с помощью JavaScript, прежде чем показывать их:

$(document).on('change', 'input:radio[name=radios]', function(){ 
    $('.myDiv').hide(); 
    $('#' + $(this).attr('id') + '_text').show(); 
}); 

Answer 4

Как это

$(document).on('change', 'input:radio[name=radios]', function() { 
    $('input:radio[name=radios]').next().hide(); // hide all divs after radio 
    $(this).next().show(); // show the div next to current radio button 
});