[英]How to completely change the contents of a div onclick?
I'm only starting to delve into javascript and have no real knowledge of how to work with jQuery, but I'm working on a page which features a control panel. 我只是开始研究javascript,对如何使用jQuery并没有真正的了解,但是我正在研究一个带有控制面板的页面。 I'm trying to get the functions of the control panel to change on clicking a button on it. 我正在尝试通过单击控制面板上的按钮来更改控制面板的功能。
Here's what I have so far; 这是我到目前为止所拥有的;
html: HTML:
<div id="functions">
<button id="prob" onclick="myproblem()" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
Javascript: 使用Javascript:
function myproblem() {
document.getElementById("functions").html('
<button id="prob" onclick="myproblem()" type="button" title="prob"></button>
<button id="button3" onclick="works3()" type="button" title="button3"></button>
<button id="button4" onclick="works4()" type="button" title="button4"></button>');
}
The button I want to use to change the html is contained within the div which is getting changed. 我要用来更改html的按钮包含在要更改的div中。 There are other onclick functions in that div which were working fine until I wrote the myproblem() code into my js file. 在该div中还有其他onclick函数可以正常工作,直到我将myproblem()代码写入我的js文件。 With that section of code there, none of my js works. 有了那段代码,我的js都不起作用。
This is a localhosted page, it won't be online. 这是一个本地主机页面,不会在线。
I'm assuming I need to use jQuery to pull this off, but I have no idea how. 我假设我需要使用jQuery来实现这一目标,但是我不知道如何实现。
Thanks, 谢谢,
Use the innerHTML()
method in JavaScript: 在JavaScript中使用innerHTML()
方法:
function myproblem() {
document.getElementById("functions").innerHTML ='<button id="prob" onclick="myproblem()" type="button" title="prob"></button> <button id="button3" onclick="works3()" type="button" title="button3"></button> <button id="button4" onclick="works4()" type="button" title="button4"></button>'
}
In Jquery you can use the html
method 在Jquery中,您可以使用html
方法
$(".functions").html('Your html code goes here')
<div class="temp01" style="display:none">
<button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<div class="temp02" style="display:none">
<button id="prob" onclick="myproblem('temp01')" type="button" title="prob"></button>
<button id="button3" onclick="works3()" type="button" title="button3"></button>
<button id="button4" onclick="works4()" type="button" title="button4"></button>
</div>
<div class="functions">
<button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
<button id="button1" onclick="works1()" type="button" title="button1"></button>
<button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<script>
function myproblem(x){ //x could be "temp01" or "temp02"
$(".functions").html("");
$("." + x).clone().attr("id","functions").show().appendTo(".functions");
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.