Question

该段应该是对其旁边输入内容的描述。实际上，只有段落会受到切换的影响。

我是jQuery的新手，所以我可能缺少明显的东西。

$(document).ready(function() {
  $("#ausfallcheck").change(function() {
    $("#ausfall").toggle();
    $("p").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p hidden>Ausfall Beginn:<p> 
    <br />
    <input type="datetime-local" name="ausfall-anfang" id="ausfall" hidden required onchange="check_time_ausfall()" />
    <br />
<p hidden>Ausfall Ende:</p> 		
    <br />
    <input type="datetime-local" name="ausfall-ende" id="ausfall" hidden required onchange="check_time_ausfall()"/>
    <br />

编辑：编辑了问题，因为不可能发现错误。所有其他答案都引用了原始的，构造错误的问题！

Answer 1

您在父段落中还有另一个子<table class="table table-sm table-bordered"> <thead> <tr class="d-flex">  <th class="col-2">Totals</th> <th class="col-1">Score</th> <th class="col-1">Status</th> </tr> </thead> <tbody> <tr class="d-flex align-items-center">  <td class="col-2"> <button data-pickstate="0" data-pickid="2619-O-TOTAL" class="btn btn-secondary waves-effect waves-light btn-block btn-sm"> O 198.5 (-110) </button> </td> <td class="col-1">107</td> <td class="col-1">OVER</td> </tr> <tr class="d-flex align-items-center">  <td class="col-2"> <button data-pickstate="0" data-pickid="2619-E-TOTAL" class="btn btn-secondary waves-effect waves-light btn-block btn-sm"> U 198.5 (-110) </button> </td> <td class="col-1">98</td> <td class="col-1"></td> </tr> <tr class="d-flex align-items-center"> <td class="col-12">free text here</td> </tr> </tbody> </table>标签。最初并没有隐藏该内容，并且在切换时会影响输入可见性。

Answer 2

问题是因为您有两个p元素。一个开始隐藏，另一个可见，尽管被其父隐藏。这样，当您toggle()这些元素时，外部的元素变为可见，内部的元素变为不可见。

要解决此问题，请为两个checked元素提供复选框的布尔p属性，以使其状态对齐：

$(document).ready(function() {
  $("#ausfallcheck").change(function() {
    $("#ausfall").toggle(this.checked);
    $("p").toggle(this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="ausfallcheck" />
<p hidden>Ausfall Beginn:
  <p> 
    <br />
    <input type="datetime-local" name="ausfall-anfang" id="ausfall" hidden required onchange="check_time_ausfall()" />
    <br />
  </p>
</p>

或者，您可以修改p选择器，使其仅定位外部元素。

还请注意，此处使用change上的click事件，由于可访问性原因，在广播和复选框输入中首选此事件。

Answer 3

不可能在我提供的问题中发现问题。

我多次使用相同的ID，导致JQuery脚本仅切换第一个输入，而不切换具有相同ID的第二个输入。

为什么JQuery只切换段落和第一个输入字段，而不切换第二个输入字段？

3 个答案: