javascript - 激活单选按钮时显示 div

<分区>

我正在尝试像 already asked question 一样做同样的事情. 问题:我有 40 个要显示的 div，我不希望每个 div 有 10 行代码...

有没有人可以就此主题提供提示？谢谢大家。 :)

最佳答案

试试这个。您只需要将 id 替换为 class。

在您发表评论后。这里有两个演示 demo1和 demo2我想你想要这样的东西。它显示带有选择的下一个 div。如果你想显示保存div.then改变

var value=$(this).attr('value'); 到 var value=$(this).attr('value')-1;

$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       $('.show-me').hide();
       var value=$(this).attr('value');
       $( ".show-me:eq("+value+")" ).show();
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='form-id'>
    <input value='1' name='test' type='radio' />radio1
    <input value='2' name='test' type='radio' />radio2
    <input value='3' name='test' type='radio' />radio3
    <input value='4' name='test' type='radio' />radio4
    <input value='5' name='test' type='radio' />radio5<br />
    <input value='6' name='test' type='radio' />radio6
    <input value='7' name='test' type='radio' />radio7
    <input value='8' name='test' type='radio' />radio8
    <input value='9' name='test' type='radio' />radio9
    <input value='10' name='test' type='radio' />radio10
    
</form>
    <div class='show-me' style='display:none'>Div 1</div>
    <div class='show-me' style='display:none'>Div 2</div>
    <div class='show-me' style='display:none'>Div 3</div>
    <div class='show-me' style='display:none'>Div 4</div>
    <div class='show-me' style='display:none'>Div 5</div>
    <div class='show-me' style='display:none'>Div 6</div>
    <div class='show-me' style='display:none'>Div 7</div>
    <div class='show-me' style='display:none'>Div 8</div>
    <div class='show-me' style='display:none'>Div 9</div>
    <div class='show-me' style='display:none'>Div 10</div>

关于javascript - 激活单选按钮时显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32095246/