javascript - 在选定单选按钮后显示/隐藏 div

标签 javascript jquery html

我有三个单选按钮,每个按钮后面都有一个 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/

相关文章:

html - 未排序列表的整页边框

javascript - 多个 Angular JS 应用程序共享同一屏幕空间

javascript - 使用 MeshLambertMaterial 时出错

javascript - Svg 圆形填充 CSS

jquery - 使用 jQuery 选择新元素

javascript - 有什么办法可以防止复制 html div 的内容或将带有样式的文本输入到剪贴板?

javascript - 如何在 React ChartJS 2 的线条图中隐藏一些点?

Jquery 如果 div 有 value1-10 添加类

javascript - 用鼠标滚轮控制div A的滚动同时滚动div B,反之亦然

javascript - jQuery:隐藏功能无法正常工作?