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();

});

But I don't know how to hide the div when another radio button is selected. 请问有什么想法吗？

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. 隐藏 ID 以“my_radio_”开头的所有 div
2. 像现在一样显示当前的 DIV

Answer 3

我所做的是divs在显示所选内容之前隐藏所有内容。给你的 div 一个类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
});