My Show or Hide DIV on radio input click 有问题答案

【问题标题】：My Show or Hide DIV on radio input click has a problemMy Show or Hide DIV on radio input click 有问题
【发布时间】：2019-04-06 18:51:42
【问题描述】：

不知道为什么，我的 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>

我需要在单击 data-value=1 的无线电输入时获得第一个 div 单击数据值 = 2 的无线电输入时的第二个 div 等等.... 请帮助...任何人

【问题讨论】：

你只隐藏了初始元素，什么时候应该隐藏所有的无线电变化。将stbr 添加到stbr1、stbr2 和stbr3
现在可以了吗？我已将 div 类添加到 stbr
应该没问题。你已经测试过了吗？它对你有用吗？
它不工作我已经测试过了
这里的错字：$("#stb"+demovalue) -> $("#stbr"+demovalue)

标签： javascript jquery html

【解决方案1】：

实际上，您在这里有几个问题和错别字。您应该使用</div> 关闭您的标签，并从单击的单选按钮中获取演示值，如下所示：

$(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>

【讨论】：