使用按钮在Javascript上隐藏和显示字段集在第一次单击时不起作用/如何在单击时更改按钮标题

Question

我正在尝试使用一个按钮来隐藏/播种字段集，该按钮的工作原理就像一个超级按钮。 但是，当我第一次单击时它不会闪烁，但是从第二次开始它就可以正常工作。

第一次单击按钮时，如何进行工作。

另外，我也想在单击时更改按钮的标题，但我不知道如何更改。

提前致谢！

这是我的代码：

 $(document).ready(function() { $('#OcultarEncabezadoFactura').click(function() { var fieldset = document.getElementById("fsEncabezado"); var boton = document.getElementById("OcultarEncabezadoFactura"); if (boton.textContent== "Ocultar Encabezado") { $('#fsEncabezado').hide(); boton.textContent= "Mostrar Encabezado"; //title I would like the button to have when fieldset is hidden } else { $('#fsEncabezado').show(); boton.textContent= "Ocultar Encabezado"; //title I would like the button to have when fieldset is shown } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button> <fieldset id="fsEncabezado"></fieldset> 

Answer 1

button元素没有title属性，因此您的测试失败。 您需要检查按钮的textContent 。

另外，请勿在<script>标记内使用HTML注释语法（ <!-- comment --> ）。 要用JavaScript注释，是： // comment here 。

 $(document).ready(function(){ $('#OcultarEncabezadoFactura').click (function(){ var fieldset = document.getElementById("fsEncabezado"); var boton= document.getElementById("OcultarEncabezadoFactura"); if(boton.textContent =="Ocultar Encabezado"){ fieldset.classList.add('hide'); boton.textContent ="Mostrar Encabezado"; } else { fieldset.classList.remove('hide'); boton.textContent="Ocultar Encabezado"; } }); }); 

 .hide { display:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button> <fieldset id="fsEncabezado"></fieldset> 

但是，如果您的目标是拥有一个仅可切换字段集可见性的按钮，则只需使用element.classList.toggle() API：

 $(document).ready(function(){ var fieldset = document.getElementById("fsEncabezado"); $('#OcultarEncabezadoFactura').click (function(){ fieldset.classList.toggle("hide"); }); }); 

 .hide { display:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button> <fieldset id="fsEncabezado"></fieldset> 

Answer 2

您应该使用innerHTML更改按钮上的文本，而不是标题。

 $(document).ready(function() { $('#OcultarEncabezadoFactura').click(function() { var fieldset = document.getElementById("fsEncabezado"); var boton = document.getElementById("OcultarEncabezadoFactura"); if (boton.innerHTML == "Ocultar Encabezado") { fieldset.classList.add('hide'); boton.innerHTML = "Mostrar Encabezado"; <!-- title I would like the button to have when fieldset is hidden--> } else { fieldset.classList.remove('hide'); boton.innerHTML = "Ocultar Encabezado"; <!-- title I would like the button to have when fieldset is shown--> } }); }); 

 .hide { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-primary" id="OcultarEncabezadoFactura" data-row-id="0">Ocultar Encabezado</button> <fieldset id="fsEncabezado"> <input type="text" /> </fieldset>