Question

我制作了这个脚本来隐藏和显示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>

这是迄今为止使用的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>

Answer 1

您没有在添加的新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>

Answer 2

使用数据属性和检查有很多方法可以做到这一点。这是应该做的一种方法。

https://jsfiddle.net/sheriffderek/5kwdtn08/

＆＃13;

// cache the nodes you'll be working with
var $inputs = $('.myForm').find('input');
var $data = $('.data');

// hide the view area to start
$data.hide();

// set click handler to find the clicked input's value + use that value to show the associated view area
$inputs.on('change', function() { // click or 'change' are probably the same in this case...
  $data.hide();
  var dataType = $(this).val();
  $('.' + dataType).show(); // or you could add a class of 'active' with display block etc.
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' class='myForm'>

  <label class='input-w radio'>
    <input type='radio' name='performance' checked='checked' value='0' />
    <span class='label'>No Goal</span>
  </label>

  <label class='input-w radio'>
    <input type='radio' name='performance' value='ctr' />
    <span class='label'>CTR</span>
  </label>

  <label class='input-w radio'>
    <input type='radio' name='performance' value='cpa' />
    <span class='label'>CPA</span>
  </label>

  <label class='input-w radio'>
    <input type='radio' name='performance' value='cpc' />
    <span class='label'>CPC</span>
  </label>

</form>


<div class='data ctr'>
  CTR DATA to collect
</div>

<div class='data cpa'>
  CPA DATA to collect
</div>

<div class='data cpc'>
  CPC DATA to collect
</div>

＆＃13;

如果您的表单 - 或不是表单变得更复杂 - 并且有许多/您需要定位他们的特定组/部分等 - 这里是一个更详细的示例： https://jsfiddle.net/sheriffderek/bgxq4vve/

隐藏/显示隐藏的div

2 个答案: