Question

我想根据按钮加载一些带有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>

现在，如果用户点击说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>

我本周刚拿起jquery。我知道我可以为每个按钮创建一个onClick函数，但这是否足够明智？然后使用$(".addnewplayer").html(....并将整个div信息放在那里？

如果你能指出最好的方法。

谢谢

Answer 1

您可以使用模板html指定每个按钮内容的内容，然后执行类似

的操作

你可以这样做

<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>

然后

//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'));
})

然后在addteam.html

<div>
    ...
</div>

Answer 2

考虑隐藏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：

.panel {
    display: none;
}

.panel.current {
    display: block;
}

JavaScript的：

$(".content").on("click", "button", function() {
    var name = $(this).attr("name");
    $(".panel").removeClass("current");
    $("div#" + name).addClass("current");
});

Answer 3

我会考虑这个：

Live Demo

<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>

如果HTML很广泛，您可以从html文件中加载内容：

$(function() {
  $(".but").on("click",function(e) {
    e.preventDefault();
    $("#content").load(this.id+".html");
  });
});

Answer 4

我建议显示/隐藏选项 example

$(function(){
    $('button').click(function(event){
        var name = $(this).attr("name");
        $("#" + name + "div").slideToggle("slow");
    })
});

在此示例中，您将在div中创建一个表单并将其放在按钮之后。 div id必须是按钮名+“div”。然后函数知道要切换的div。

Answer 5

您可以使用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>

在按钮单击时加载包含内容的div

5 个答案: