javascript - 我的 Show or Hide DIV on radio input click 有问题

Question

不知道为什么，我的 jquery 代码用于隐藏最初显示的 div，并首次显示另一个带有“数据值”的 div。之后，即使选择了其他单选按钮，它也只显示显示的 div(第一次的另一个 div)。

包含 jquery:<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我的CSS

.stbr{
display: none;
}

我的html

<input name='stb' type='radio' data-value='1' value='value'>
<input name='stb' type='radio' data-value='2' value='value'>
<input name='stb' type='radio' data-value='3' value='value'>

<div class="stbr" style="display: block;">
initial div
<div>
<div id="stb1" class="stbr">
first shown another div
<div>
<div id="stb2" class="stbr">
second div
<div>
<div id="stb3" class="stbr">
third div
<div>`

我的 jquery 代码

<script src="./lib/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="radio"]').click(function(){

    var stb = document.querySelector("input");
    var demovalue = stb.getAttribute("data-value");
    $("div.stbr").hide();
    $("#stb"+demovalue).show();
    });
});
</script>

我需要在单击数据值=1 的单选输入时获得第一个 div单击数据值 = 2 的 radio 输入的第二个 div等等....请帮助...任何人

Answer 1

实际上，您这里有几个问题和拼写错误。你应该用 </div> 关闭你的标签并从单击的单选按钮中获取 demovalue，如下所示:

$(document).ready(function() {
  $('input[type="radio"]').click(function() {

    var stb = this;
    var demovalue = stb.getAttribute("data-value");
    $("div.stbr").hide();
    $("#stbr" + demovalue).show();
  });
});

.stbr {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<input name='stb' type='radio' data-value='1' value='value'>
<input name='stb' type='radio' data-value='2' value='value'>
<input name='stb' type='radio' data-value='3' value='value'>

<div class="stbr" style="display: block;">
  initial div
</div>
<div id="stbr1" class="stbr">
  first shown another div
</div>
<div id="stbr2" class="stbr">
  second div
</div>
<div id="stbr3" class="stbr">
  third div
</div>