javascript - 在选定单选按钮后显示/隐藏 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>

如您所见，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();

但没有理由打扰(直到事件处理程序结束后才会呈现屏幕)。