Question

默认情况下，两个var Task3 = [ { "action_3": 1, "action_4": 1, "action_5": 0, "action_6": 0 } ]; //console.log(Object.keys(Task3[0]).length); for (var i=0;i<Task3.length;i++){ console.log(Object.keys(Task3[i]).length); let values= Object.values(Task3[i]); var equalToOne = values.filter(function (item) { return item == 1; }) console.log(equalToOne.length); }// expected output: 4都应隐藏。通过选择单选按钮，必须显示相应的DIV（按其#id）。

reagent_code

function marketer(x) {
  if (x == 0) {
    document.getElementById('reagent_code').style.display = 'none';
  } else if (x == 1) {
    document.getElementById('reagent_code').style.display = 'block';
    return;
  }
}

我收到此错误。

TypeError：行销人员不是函数

Answer 1

在您的代码中建议使用AvcS，而无需任何其他库。

应该在全局范围内定义功能行销人员，如果要在函数中定义功能，请使用window.marketer = function

window.marketer = function(x) {
  if (x == 0) {
    document.getElementById('reagent_code').style.display = 'none';
  } else if (x == 1) {
    document.getElementById('reagent_code').style.display = 'block';
    return;
  }
}

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
    <label class="form-check-label" for="yes">Yes</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
    <label class="form-check-label" for="no">No</label>
  </div>
</div>
<div id='reagent_code'>
My amazing div
</div>

但是，根据Rory McCrossan的建议，您应该查看代码。

Answer 2

尝试一下

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
    <label class="form-check-label" for="yes">Yes</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
    <label class="form-check-label" for="no">No</label>
  </div>
  <!-- div to hide and show -->
  <div id="div1" style="display: none;">
      <h1>this is div 1 will show if yes</h1>
  </div>
  <div id="div2" style="display: none;">
      <h1>this is div 2 will show if no</h1>
  </div>
<script>
    function marketer(x) {
          if (x == 0) {
            document.getElementById('div1').style.display = 'none';
            document.getElementById('div2').style.display = 'block';
          } else if (x == 1) {
            document.getElementById('div1').style.display = 'block';
            document.getElementById('div2').style.display = 'none';
            return;
          }
        }
</script>

Answer 3

确保您没有使用相同的函数名称和元素名称
使用事件监听器并切换元素

jQuery

$("[name=marketer]").on("click", function() {
  console.log(this.value)
  $('#reagent_code').toggle(this.value == 1)
})
$("[name=marketer]:checked").click()

#Reagent {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="marketer" checked id="yes" value="1">
  <label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="marketer" id="no" value="0">
  <label class="form-check-label" for="no">No</label>
</div>
<div id="reagent_code">Reagent</div>

普通JS

[...document.querySelectorAll("[name=marketer]")].forEach(function(elem) {
  elem.addEventListener("click", function() {
    console.log(this.value)
    document.getElementById('reagent_code').style.display = this.value === "0" ? 'none' : 'block';
  })
  if (elem.checked) {
    elem.click();
  }  
})

#Reagent { display:none }

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="marketer" checked  id="yes" value="1">
  <label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="marketer"  id="no" value="0">
  <label class="form-check-label" for="no">No</label>
</div>
<div id="reagent_code">Reagent</div>

Answer 4

尝试以下简单代码：

$('input[type=radio]').change(function(){
	if($(this).val() == 'ON') {
		return $('.content').css('display', 'block');
	}
	return $('.content').css('display', 'none');
});

<input type="radio" name="radio" id="radio-1" value="ON" checked="">
<label for="radio-1">ON</label>
<input type="radio" name="radio" id="radio-2" value="OFF">
<label for="radio-2">OFF</label>

<div class="content">
	Hello world.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

使用此格式代码将有效

<div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
        <label class="form-check-label" for="yes">Yes</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
        <label class="form-check-label" for="no">No</label>
    </div>
    </div>


     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
        <script src="js/jquery-3.2.1.min.js"></script> 
        <!-- Include all compiled plugins (below), or include individual files as needed --> 
        <script src="js/popper.min.js"></script> 
        <script src="js/bootstrap-4.0.0.js"></script>

        <script>
        function marketer(x) {
          if (x == 0) {
            document.getElementById('reagent_code').style.display = 'none';
          } else if (x == 1) {
            document.getElementById('reagent_code').style.display = 'block';
            return;
          }
        }
        </script>

如何通过单击单选按钮切换div？

5 个答案: