Question

如何使用按钮而不是复选框将此简单功能更改为onclick事件？我是JavaScript新手。

function showhide() {
        if (document.getElementById('toggle').checked == true) {
            document.getElementById('hidethis').style.display = 'block';
        } else {
            document.getElementById('hidethis').style.display = 'none';
        }
    }

Answer 1

更好地使用classList.toggle函数。切换className

function showhide() {
  document.getElementById('hidethis').classList.toggle('hide');
}

.hide {
  display: none;
}

<button onclick="showhide()">Click Me</button>
<div id="hidethis">Text</div>

Answer 2

<button id="yourbutton">Click</button>
<script type="text/javsacript">$("#yourbutton").on("click", function() {
    if (document.getElementById('toggle').checked == true) {
        document.getElementById('hidethis').style.display = 'block';
    } else {
        document.getElementById('hidethis').style.display = 'none';
    }
});</script>

希望有所帮助

并且不要忘记包含jquery插件<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 3

使用jQuery的最简单方法

$(".buttonClass").click(function(){
  $("#hidethis").toggleClass("displayNone");
})

//style code
.displayNone{ display: none;}

Answer 4

以下是如何使用jQuery：

function showhide() {
  var hidethis1 = document.getElementById('hidethis1');
  var hidethis2 = document.getElementById('hidethis2');

  if (getComputedStyle(hidethis1).getPropertyValue('display') === 'none') {
    hidethis1.style.display = 'block';
    hidethis2.style.display = 'none';
  } else {
    hidethis1.style.display = 'none';
    hidethis2.style.display = 'block';
  }
}

document.getElementById('clickthis').addEventListener('click', showhide);

#hidethis2 {
  display: none;
}

<button id="clickthis">Click Me</button>
<div id="hidethis1">Hide Me (1)</div>
<div id="hidethis2">Hide Me (2)</div>

如果要切换两个以上的元素，则应该为每个元素指定相同的类，并使用for循环。

如何将已检查的事件更改为onclick事件？

4 个答案: