再次单击按钮时，如何将javascript效果恢复为显示：无？

Question

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">
            Join Today
        </legend>
        {{form2|crispy}}
    </fieldset>
</form>

   
function updateProfile() {
    console.log(this)
    document.getElementById("form1").style.display = "block";
}

我只能以一种方式改变效果。如何将效果改回显示：无，使表格不再可见？

Answer 1

您可以添加条件以检查document.getElementById("form2").style.display == "none"

function updateProfile() {
    //console.log(this)
    if(document.getElementById("form2").style.display == "none") {
    document.getElementById("form2").style.display = "block";
    }else{
    document.getElementById("form2").style.display = "none";
    }
}

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
<input type="text" />
</form>

Answer 2

要获得预期的结果，请在布尔值变量下面使用以下切换选项

1. 默认将变量设置为false
2. 每次单击功能时，切换其值
3. 根据变量的条件，设置 block 或 none

var toggle = false
function updateProfile() {
  toggle =!toggle
    document.getElementById("form2").style.display = toggle ? "block" : "none";
}

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">
            Join Today
        </legend>
        {{form2|crispy}}
    </fieldset>
</form>

Answer 3

类似这样的方法可以解决问题：

updateProfile = () => {
  let el = document.getElementById("form2");
  if (getComputedStyle(el).display === 'none') {
    el.style.display = "block";
  } else {
    el.style.display = "none";
  }
}

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
  <fieldset class="form-group">
    <legend class="border-bottom mb-4">
      Join Today
    </legend>
  </fieldset>
</form>

或者，您可以利用data属性：

updateProfile = () => {
  let el = document.getElementById("form2");
  el.setAttribute('data-state',
    el.getAttribute('data-state') === 'open' ? 'closed' : 'open');

}

form[data-state=open] {
  visibility: visible;
}

form[data-state=closed] {
  visibility: hidden;
}

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' data-state="closed">
  <fieldset class="form-group">
    <legend class="border-bottom mb-4">
      Join Today
    </legend>
  </fieldset>
</form>

甚至是一些普通的旧类：

updateProfile = () => {
  let el = document.getElementById("form2");
  if (new Set(el.classList).has('show')) {
    el.classList.remove('show');
    el.classList.add('hide');
  } else {
    el.classList.remove('hide');
    el.classList.add('show');
  }
}

.show {
  display: block;
}

.hide {
  display: none;
}

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' class="show">
  <fieldset class="form-group">
    <legend class="border-bottom mb-4">
      Join Today
    </legend>
  </fieldset>
</form>

希望有帮助，

Answer 4

表单隐藏/显示：

此方法使用class来隐藏/显示表单。您可以简单地将样式添加到.css文件中。

    <button onclick="updateProfile({d:this});return false;">Change profile pic</button>
    <form method='POST' id='form2' class="di-0">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">
                Join Today
            </legend>
            {{form2|crispy}}
        </fieldset>
    </form>


    <script>
        function updateProfile(z){
            var x,a;
            x=/(di-0)/i;
            if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
            switch (a){
                case 1:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
                    break;
                case 0:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
                    break;
                }
        }
    </script>
    <style>.di-0{display:none!important}.di-1{display:inline-block}</style>

表单显示/隐藏：

如果您希望这样做，可以将class="di-0"更改为class="di-1"：

    <button onclick="updateProfile({d:this});return false;">Change profile pic</button>
    <form method='POST' id='form2' class="di-1">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">
                Join Today
            </legend>
            {{form2|crispy}}
        </fieldset>
    </form>


    <script>
        function updateProfile(z){
            var x,a;
            x=/(di-0)/i;
            if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
            switch (a){
                case 1:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
                    break;
                case 0:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
                    break;
                }
        }
    </script>

    <style>.di-0{display:none!important}.di-1{display:inline-block}</style>

此方法也可以其他形式使用。关键是在hide/display或动作标签（例如button标签）之后紧跟a标签。

    <a href="#" onclick="updateProfile({d:this});return false;">Change profile pic</a>
    <div class="di-0">
        Display | Display | Display
    </div>


    <script>
        function updateProfile(z){
            var x,a;
            x=/(di-0)/i;
            if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
            switch (a){
                case 1:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
                    break;
                case 0:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
                    break;
                }
        }
    </script>

    <style>.di-0{display:none!important}.di-1{display:inline-block}</style>