Javascript 隐藏/显示隐藏的div

我制作这个脚本是为了隐藏和显示div，但是我想添加一个额外的div/radio。在添加额外的div之前，一切正常，现在系统无法工作

cpcdata

是我添加的新div

这是HTML：

   <div>
                Performance Goal</label>
            </div>


                <label id="per1">
                <input name="performance" type="radio" checked="checked" 
value="43"> No Goal</label>

                <label id="per2">
                <input name="performance" type="radio" value="43"> 
CTR</label>

                <label id="per3">
                <input name="performance" type="radio" value="43"> 
CPA</label>

                <label id="per4">
                <input name="performance" type="radio" value="43"> 
CPC</label>

        </div>
    </div><br>
    <br>

    <div id="ctrdata">
        CTR DATA to collect
    </div>

    <div id="cpadata">
       CPA DATA to collect
    </div>

    <div id="cpcdata">
       CPC DATA to collect
    </div>

绩效目标
无目标
中心
注册会计师
共产党




要收集的CTR数据
需要收集的注册会计师数据
要收集的CPC数据

以下是目前使用的JS：

<script>

$("#ctrdata").hide();
$("#cpadata").hide();
$("#cpcdata").hide();
$(".form-group input[type='radio']").on("change", function (e) {
    if($(e.target).closest("label")[0].id == "per3"){
        $("#ctrdata").hide();
        $("#cpadata").show();
    }else if($(e.target).closest("label")[0].id == "per2"){
        $("#ctrdata").show();
        $("#cpadata").hide();
    }else{
        $("#ctrdata").hide();
        $("#cpadata").hide();
    }
});

</script>  

$（“#ctrdata”）.hide（）；
$（“#cpadata”）.hide（）；
$（“#cpcdata”）.hide（）；
$（“.form group input[type='radio']”）。关于（“更改”，函数（e）{
if（$（e.target）.closest（“label”）[0].id==“per3”）{
$（“#ctrdata”）.hide（）；
$（“#cpadata”）.show（）；
}else if（$（e.target）.closest（“label”）[0].id==“per2”）{
$（“#ctrdata”）.show（）；
$（“#cpadata”）.hide（）；
}否则{
$（“#ctrdata”）.hide（）；
$（“#cpadata”）.hide（）；
}
});

您没有对添加的新div调用show（）。您还可以通过隐藏更改中的所有内容，然后只显示希望看到的div来简化函数

<script>
function hide_divs() {
    $("#ctrdata").hide();
    $("#cpadata").hide();
    $("#cpcdata").hide();
}
hide_divs();
$(".form-group input[type='radio']").on("change", function (e) {
    hide_divs();
    if($(e.target).closest("label")[0].id == "per3"){
        $("#cpadata").show();
    }else if($(e.target).closest("label")[0].id == "per2"){
        $("#ctrdata").show();
    }else{
        $("#cpcdata").show();
    }
}); </script>  

函数hide_divs（）{
$（“#ctrdata”）.hide（）；
$（“#cpadata”）.hide（）；
$（“#cpcdata”）.hide（）；
}
隐藏分区（）；
$（“.form group input[type='radio']”）。关于（“更改”，函数（e）{
隐藏分区（）；
if（$（e.target）.closest（“label”）[0].id==“per3”）{
$（“#cpadata”）.show（）；
}else if（$（e.target）.closest（“label”）[0].id==“per2”）{
$（“#ctrdata”）.show（）；
}否则{
$（“#cpcdata”）.show（）；
}
});   

有很多方法可以通过数据属性和：选中来实现这一点。这里有一种方法可以做到这一点

//缓存将使用的节点
var$inputs=$（'.myForm'）。find（'input'）；
var$data=$（'.data'）；
//隐藏要启动的视图区域
$data.hide（）；
//设置click handler以查找单击输入的值，并使用该值显示关联的视图区域
$inputs.on（'change'，function（）{//click或'change'在本例中可能是相同的。。。
$data.hide（）；
var dataType=$（this.val（）；
$（'..+dataType）.show（）；//或者您可以添加一个带有显示块等的'active'类。
});

无目标
中心
注册会计师
共产党
要收集的CTR数据
需要收集的注册会计师数据
要收集的CPC数据
请澄清您的问题。问题是如何修改js-我可以让它与3个收音机/div一起工作。。。。但是，对于添加/修改jsTry的正确方法以及使用该代码获得适当格式的正确方法，4-try并不感到困惑。这将更容易帮助。谢谢你，我明白你的意思-尝试了这个代码，它工作得很好，但是所有的div在页面加载时都是可见的-目的是没有任何divvisible@Brian我编辑回答隐藏页面上的所有div非常感谢-似乎解决了这个问题，但现在当返回到“无目标”选项时-出现了CPC div-我尝试在节目结束后添加和额外隐藏-但不是工作感谢一百万-似乎可以工作良好-唯一的问题是-这将是更广泛表单的一部分（转移到db）是否有任何方法可以运行myForm调用？希望你明白我的意思，我不明白。是的，有很多方法可以修改它以适应任何情况。是的，我认为我的评论不清楚-对不起！在我看来，我们的方式是形式是自包含的。。。。但最后一页将有几个其他表单元素。。。我想我可以扩展您提供的表单以涵盖所有内容—如果我更改表单名称并将脚本中的引用更改为匹配，这会是个问题吗？您就是这样做的。”查询“你需要的元素”和“做”的东西。谢谢它似乎工作得很好-我想真正的测试将到来，我会尝试编辑它更多！非常感谢-这解决了我目前的问题。