javascript - JQuery 使用类标签附加 HTML onclick

标签 javascript html jquery

如果这是一个新手任务,我很抱歉。我最近才开始学习。我正在尝试使用 jQuery 将一系列输入文本框附加到我的网站上,但到目前为止我所尝试的一切都没有奏效。

HTML 文档

<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="testjavascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<head>
  <titleTest Web App</title>
  <h1>Test Number 1</h1>
</head>

<button onclick="meth_hide_show()">Hide/Show</button>
<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
  <option value="Pipe_crack">Pipe Crack</option>
</select>

<br>

<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
  <option value="N/S">Nature Strip</option>
  <option value="Road">Road</option>
  <option value="n/s_rd">Nature Strip & Road</option>
</select>

<form>
  <label for="meters">Number of Meters:</label>
  <input type="number" id="ren_meter" name="ren_meter">
</form>
</div>

<button id="save_meth" onclick="appendmethd()">Add Methodology</button>

<div class="meth_append">

</div>

</div>
</html>

Javascript 文档:

function meth_hide_show() {
  var x = document.getElementById("methodology");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function appendmethd() {
    var meth=document.getElementById("methodology")
    $("meth_append").append(meth)
}

最佳答案

试试这个

function meth_hide_show() {
//retrieve the jquery object
  var x = $("#methodology");

  if (x.is(':visible')) {
//if its visible, hide it
    x.hide();
  } else {
//else show it
    x.show();
  }
}

function appendmethd() {
    var meth=$("#methodology");
    $(".meth_append").append(meth);
}

关于javascript - JQuery 使用类标签附加 HTML onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62966390/

相关文章:

javascript - 为什么 'this' 在箭头函数中引用时返回 'undefined' 而在匿名函数中调用时却不返回?

javascript - Jquery 不会从按钮更改背景图像

javascript - 在源中播放带有井号的音频不起作用

javascript - 当 $rootScope 改变时 AngularJS 更新 View

jQuery:如果选择了一个选项,则更改 css 值

javascript - 主干各未定义

javascript - 如何在JavaScript中的每组数字后面插入一个字符?

javascript - 如何使用 javascript 更改视频标签海报属性?

javascript - 如何检测退出键的 KeyboardEvent?

javascript - 使用 Javascript,如何更改不同 HTML 页面上的 CSS 显示属性