JavaScript与jQuery的hide()和show()等效吗? [英] What is the JavaScript equivalent of jQuery's hide() and show()?

问题描述

我有一个简单的隐藏和显示jQuery代码，我想问一下这是否等效于JavaScript?这是我的代码.

I have a simple hide and show jQuery code and I want to ask if there is equivalent of this to JavaScript? Here's my code.

$(document).ready(function() {
  $("#myButton").hide();
  $("#1").click(function() {
    $("#myButton").show();
    $("#myButton").click(function() {
      $("#myButton").hide();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />

我遵循了以下注释中的一些代码，但是它们不起作用:

I have followed some codes from the comments below but they are not working:

<script>
  document.getElementById('myButton').style.display = 'none';

  function selectOptionsupdated(select) {
    document.getElementById('myButton').style.display = 'block';
  }
</script>

<select onSelect="selectOptionsupdated(this)">
  <option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />

首先要隐藏按钮，然后单击<option>标签科学"(Science)，然后显示按钮；单击按钮时，单击按钮后将其隐藏.如果还有更多<option>标签怎么办?

What I want is at first the button is hidden, and when I click the <option> tag "Science" the button appears and when I click the button, the button is hidden after it is being clicked. And what if there are more <option> tags?

推荐答案

这很简单

document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide

在您的选择中添加onSelect="selectOptionsupdated(this)

然后

function selectOptionsupdated(select){
//do your stuff here  
}

这篇关于JavaScript与jQuery的hide()和show()等效吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！