Question

我有一个“保存”按钮。当我单击此按钮时，它消失了，并且显示“取消保存”按钮。以下Javascript可以正常工作：

git clone ssh://git@someservice.someurl:someport/git-server/repos/somerepo)

这是我的按钮：

    function saveFunction(id){
        var ie=document.all&&!window.opera? document.all : 0
        var frmObj=ie? ie[id] : document.getElementById(id)
        var toObj=ie? ie['unsave'] : document.getElementById('unsave')
        frmObj.style.display='none';
        toObj.style.display='inline';
        toObj.value=frmObj.innerHTML
    }

这是CSS（隐藏“取消保存”按钮）：

<form id="save-form" method="" action="" novalidate="novalidate">
    <button id="save" type="button" onclick="saveFunction(this.id)">Save</button>
    <button id="unsave" type="button" class="hide" onclick="unsaveFunction(this.id)">Unsave</button>
</form>

问题是我还希望“取消保存”按钮（单击时）消失，而要显示“保存”按钮。因此，目前它仅以一种方式起作用：.hide { display:none; }，但我也希望它以另一种方式起作用：Save --> Unsave。

我试图复制Javascript函数，更改其属性，以便它可以以其他方式起作用（请参见Unsave --> Save），但事实并非如此。我有点卡在那儿。关于如何解决这个问题有什么想法吗？

Answer 1

选中此项，希望对您有所帮助。

   function hideOnClk(id){
             if(id == "save"){
               document.getElementById("unsave").style.display="block";
               document.getElementById(id).style.display="none";
             }else{
               document.getElementById("save").style.display="block";
               document.getElementById(id).style.display="none";
             }
          }

<form id="save-form" method="" action="" novalidate="novalidate">
        <button id="save" type="button" onclick="hideOnClk(this.id)">Save</button>
        <button id="unsave" type="button" class="hide" onclick="hideOnClk(this.id)">Unsave</button>
    </form>

Answer 2

使用jQuery

尝试使用toggleClass

 <form id="save-form" method="" action="" novalidate="novalidate">
        <button id="save" type="button" onclick="$('#save').toggleClass('hide');$('#unsave').toggleClass('hide');">Save</button>
        <button id="unsave" type="button" class="hide" onclick="$('#save').toggleClass('hide');$('#unsave').toggleClass('hide');">Unsave</button>
    </form>

使用JavaScript

    function myFunction() {
   var element=     document.getElementById("save");
        element.classList.toggle("hide");
  var element=  document.getElementById("unsave");
        element.classList.toggle("hide");
    }

 <form id="save-form" method="" action="" novalidate="novalidate">
            <button id="save" type="button" onclick="myFunction();">Save</button>
            <button id="unsave" type="button" class="hide" onclick="myFunction();">Unsave</button>

Answer 3

同时具有两个功能的单个按钮呢？它开始时就像一个保存按钮，单击后会执行保存操作，然后变成“取消保存”按钮。

请参见下面的代码以查看是否有帮助：

const btn = document.getElementById("saveControl");


btn.onclick = function(){
console.log(btn.classList.value)
  if (btn.classList.contains("saveBtn")){
    //DO SAVE STUFF...
    
    btn.classList.remove("saveBtn")
    btn.classList.add("btnUnsave")
    btn.innerText = "Unsave"
    
  } else {
    //DO UNSAVE STUFF...
    
    btn.classList.add("saveBtn")
    btn.classList.remove("btnUnsave")
    btn.innerText = "Save"
  }
}

.saveBtn{
  color:blue
}

.btnUnsave{
 color: red;
}

<button id="saveControl" class="saveBtn">Save</button>

Answer 4

简单易行，关于您的编程水平，我不想以各种可能的方式淹没您。

function saveFunction() {
  // getting the form from the document using the form name attribute 
  let form = document.form;
  // using the buttons names attribute to select theme
  // classList property of any element gives you all the class it has
  // add('class name') adds the specified class
  form.save.classList.add('hide');
  // remove('class name') removes the specified class
  form.unsave.classList.remove('hide');
}

function unsaveFunction() {
  let form = document.form;
  form.unsave.classList.add('hide');
  form.save.classList.remove('hide');
}

.hide {
  display: none;
}

<form name="form" method="" action="" novalidate="novalidate">
  <button id="save" type="button" onclick="saveFunction()" name="save">Save</button>
  <button id="unsave" type="button" name="unsave" class="hide" onclick="unsaveFunction()">Unsave</button>
</form>

Answer 5

尝试HTML DOM classList属性切换

document.getElementById("save").toggle("hide)
document.getElementById("unsave").toggle("hide)

使用onclick更改按钮文本

5 个答案: