时间戳

首页 > 解决方案 > 单击按钮时执行 2 个功能

javascript - 单击按钮时执行 2 个功能

问题描述

我有一个按钮，它将删除输入的只读属性，并且还将显示隐藏的按钮。

问题是，我需要点击我的按钮 2x 才能执行我的第二个功能。我的目标是，我怎样才能只实现 1 点击按钮，它会做我的两个功能？删除只读并显示隐藏按钮。

谢谢

小提琴：http: //jsfiddle.net/rain0221/qfjar0x1/14/

//removing readonly attribute of input
$(document).ready(function() {
  $('#btnEditAbout').click(function() {
    var Aboutfields = document.getElementsByClassName('abt');
    for (var x = 0; x < Aboutfields.length; x++) {
      Aboutfields[x].removeAttribute('readonly', 'readonly');
    }
  });

  //showing hidden buttons when edit information is clicked

  var btnEditAbout = document.getElementById('btnEditAbout'),
    Removeemp = document.getElementById('Removeemp');
  Addemp = document.getElementById('Addemp');

  function toggle() {
    if (btnEditAbout.style.display === "block") {
      btnEditAbout.style.display = "none";
      Addemp.style.display = "block";
      Removeemp.style.display = "block";
    } else { // switch back
      btnEditAbout.style.display = "block";
      Addemp.style.display = "none";
      Removeemp.style.display = "none";
    }
  }
  btnEditAbout.onclick = toggle;
});
#btnEditAbout {
  display: block;
}

#Addemp {
  display: none;
}

#Removeemp {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>

标签： javascripthtml

解决方案

You cannot click a hidden button

You CAN use jQuery more than you do

$(function() {
  $('.toggle').on("click", function() {
    const edit = this.id === "btnEditAbout"; // what did we click 
    $("#Addemp").toggleClass('hide',!edit)
    $("#Removeemp").toggleClass('hide',!edit)
    $("#btnCancel").toggleClass('hide',!edit)
    if (edit) $(".abt").removeAttr('readonly');
    else  $(".abt").attr('readonly',true);
  });
});
.hide { display: none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">


<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right toggle" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>


<!-- hidden 2 buttons -->
<button id="Addemp" type="button" class="hide">Add Record </button>
<button id="Removeemp" type="button" class="hide">Remove Record </button>
<button id="btnCancel" type="button" class="hide toggle">Cancel</button>

推荐阅读