jQuery 单击按钮时加载带有内容的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21110884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load div with content on button click
提问by LefterisL
i want to load some divs with jquery according to buttons. For example we have
我想根据按钮加载一些带有 jquery 的 div。例如我们有
<div class="content">
<button type="button" name="addteam">Add New Team</button>
<button type="button" name="addplayer">Add New Player</button>
<button type="button" name="addgame">Add New Game</button>
<button type="button" name="deleteteam">Delete Team</button>
<button type="button" name="deleteplayer">Delete Player</button>
<button type="button" name="deletegame">Delete Game</button>
<button type="button" name="addplayermatch">Add Player To Match</button>
<button type="button" name="deleteplayermatch">Remove Player From Match</button>
</div>
Now if the user clicks on say Add New Playeri want it to show the
现在，如果用户点击说Add New Player我希望它显示
<div class="addnewplayer">
<h2>Add New Player</h2>
<form action="addplayer.php" method="POST"/>
<p>Name: <input type="text" name="name" /></p>
<p>Sex: <input type="text" name="sex" /></p>
<p>Email: <input type="text" name="email" /></p>
<p>Birth: <input type="text" name="birth" /></p>
<p>League: <input type="text" name="league" /></p>
<p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p>
<input type="submit" value="Submit" />
</form>
</div>
I just picked up jquery this week. I understand i can make a function onClick for each button but is that wise enough? And then use $(".addnewplayer").html(....and put the whole div info in there?
我这周刚学了 jquery。我知道我可以为每个按钮创建一个 onClick 函数，但这是否足够明智？然后使用$(".addnewplayer").html(....并将整个 div 信息放在那里？
If you could point out the best way to do this.
如果你能指出最好的方法来做到这一点。
Thank you
谢谢
采纳答案by mplungjan
I would consider this:
我会考虑这个：
<head>
<style>
.content { display:none }
</style>
<script src="jquery.js"></script>
<script>
$(function() {
$(".but").on("click",function(e) {
e.preventDefault();
$(".content").hide();
$("#"+this.id+"div").show();
});
});
</script>
</head>
<body>
<div class="navigation">
<button class="but" type="button" id="addteam">Add New Team</button>
<button class="but" type="button" id="addplayer">Add New Player</button>
<button class="but" type="button" id="addgame">Add New Game</button>
<button class="but" type="button" id="deleteteam">Delete Team</button>
<button class="but" type="button" id="deleteplayer">Delete Player</button>
<button class="but" type="button" id="deletegame">Delete Game</button>
<button class="but" type="button" id="addplayermatch">Add Player To Match</button>
<button class="but" type="button" id="deleteplayermatch">Remove Player From Match</button>
</div>
<div id="addplayerdiv" class="content">
<h2>Add New Player</h2>
<form ...>
</form>
</div>
<div id="addteamdiv" class="content">
<h2>Add New Team</h2>
<form ...>
</form>
</div>
</body>
If the HTML is extensive, you can load the content from an html file:
如果 HTML 很长，您可以从 html 文件加载内容：
$(function() {
$(".but").on("click",function(e) {
e.preventDefault();
$("#content").load(this.id+".html");
});
});
回答by Arun P Johny
You can use a template html to specify the contents for each of the buttons content, then do something like
您可以使用模板 html 为每个按钮内容指定内容，然后执行类似的操作
You can do soemthing like
你可以做类似的事情
<div class="content">
<button type="button" name="addteam" data-href="addteam.html">Add New Team</button>
<button type="button" name="addplayer" data-href="addplayer.html">Add New Player</button>
<button type="button" name="addgame" data-href="addgame.html">Add New Game</button>
....
</div>
then
然后
//target all buttons elements with data-href property
$('button[data-href]').click(function () {
//load the contents of the url specified by the href into addnewplayer
$(".addnewplayer").load($(this).data('href'));
})
then in addteam.html
然后在 addteam.html
<div>
...
</div>
回答by Maurice Perry
Consider hiding the div's instead of loading them:
考虑隐藏 div 而不是加载它们：
<div class="content">
<button type="button" name="addteam">Add New Team</button>
<button type="button" name="addplayer">Add New Player</button>
<button type="button" name="addgame">Add New Game</button>
<button type="button" name="deleteteam">Delete Team</button>
<button type="button" name="deleteplayer">Delete Player</button>
<button type="button" name="deletegame">Delete Game</button>
<button type="button" name="addplayermatch">Add Player To Match</button>
<button type="button" name="deleteplayermatch">Remove Player From Match</button>
</div>
...
<div id="addplayer" class="panel">
<h2>Add New Player</h2>
<form action="addplayer.php" method="POST"/>
<p>Name: <input type="text" name="name" /></p>
<p>Sex: <input type="text" name="sex" /></p>
<p>Email: <input type="text" name="email" /></p>
<p>Birth: <input type="text" name="birth" /></p>
<p>League: <input type="text" name="league" /></p>
<p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p>
<input type="submit" value="Submit" />
</form>
</div>
css:
css：
.panel {
display: none;
}
.panel.current {
display: block;
}
JavaScript:
JavaScript：
$(".content").on("click", "button", function() {
var name = $(this).attr("name");
$(".panel").removeClass("current");
$("div#" + name).addClass("current");
});
回答by Itay Gal
I would recommend show/hide option example
我会推荐显示/隐藏选项示例
$(function(){
$('button').click(function(event){
var name = $(this).attr("name");
$("#" + name + "div").slideToggle("slow");
})
});
In this example you create a form inside a div and place it after the button. The div id needs to be the button name + "div". Then the function knows which div to toggle.
在本例中，您在 div 中创建一个表单并将其放在按钮之后。div id 需要是按钮名称+“div”。然后该函数知道要切换哪个 div。
回答by Lijo
you can use ajax so that the div will dynamically loaded each time when you click on the buttons
您可以使用ajax，以便每次单击按钮时动态加载div
<div class="content">
<button type="button" name="addteam" onclick="onshow()>Add New Team</button>
<button type="button" name="addplayer">Add New Player</button>
<button type="button" name="addgame">Add New Game</button>
<button type="button" name="deleteteam">Delete Team</button>
<button type="button" name="deleteplayer">Delete Player</button>
<button type="button" name="deletegame">Delete Game</button>
<button type="button" name="addplayermatch">Add Player To Match</button>
<button type="button" name="deleteplayermatch">Remove Player From Match</button>
</div>
<div class="addnewplayer">
</div>
<script language="javascript">
function onshow()
{
$.ajax({
type:'POST'
url:context+'/newteam',
success:function(data) {
$( "div.addnewplayer" ).html( data );
}
});
}
then in newteam.html
<div class="addnewplayer">
<h2>Add New Player</h2>
<form action="addplayer.php" method="POST"/>
<p>Name: <input type="text" name="name" /></p>
<p>Sex: <input type="text" name="sex" /></p>
<p>Email: <input type="text" name="email" /></p>
<p>Birth: <input type="text" name="birth" /></p>
<p>League: <input type="text" name="league" /></p>
<p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p>
<input type="submit" value="Submit" />
</form>
</div>
