我有三个单选按钮,每个按钮后面都有一个 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。请问有什么想法吗?
最佳答案
只需在显示新的之前将它们全部隐藏即可:
$(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();
但没有理由打扰(直到事件处理程序结束后才会呈现屏幕)。
关于javascript - 在选定单选按钮后显示/隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17344406/