.html()函数的jQuery只对第一个元素起作用

时间:2017-05-04 02:10:52

标签: php jquery html mysql ajax

我正在使用wordpress和php与我的合作伙伴分配给我们的系统。我们已经完成了一些工作,但是我遇到了这个问题。

每当我在ajax中使用.html()函数时,只有选项卡的第一个元素才能获得查询结果

以下是我的代码:

的index.php

<?php get_header(); ?>
    <body>
                                <!--- START HEADER -->
        <header>
            <div class="wrapper">
                    <h1 id="logo">Logo</h1>
                <nav>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="#" id="myBtn">Create Team</a></li>
                        <li><a href="">Metrics</a></li>
                        <li><a href="">About Us</a></li>
                    </ul>
                </nav>
            </div>
        </header>
                                <!--- END HEADER -->

                                <!--- START MAIN CONTENT -->

        <div class="wrapper">
            <div id="teamholder">
                <!--- ACCORDION HTML -->
                <!--- END OF ACCORDION HTML -->
            </div>

            <div id="profileholder">
            </div>

            <div id="randomdiv">
            </div>
        </div>

teams.php

<?php
    // Display members from database
    $connect = mysqli_connect('localhost', 'root', '', 'chansandbox');

    if(isset($_POST['display'])){
        $team = "SELECT * FROM team";
        $resultTeam = mysqli_query($connect, $team);

        while($arrayTeam = mysqli_fetch_array($resultTeam)){
            ?>
                <ul class="teams">
                    <li><a href="#"><i class="fa fa-cog"></i><?php echo $arrayTeam['team_name']; ?></a>
                        <ul class="menu">
                            <li id="memberholder">
                            </li>
                        </ul>
                    </li>
                </ul>
            <?php
        }
        exit();
        mysqli_close($connect);
    }

members.php

<?php
// Display members from database
    $connect = mysqli_connect('localhost', 'root', '', 'chansandbox');

    if(isset($_POST['display'])){
        /*
        $numTeams = "SELECT count(*) AS 'number' FROM team";
        $resultNumTeams = mysqli_query($connect, $numTeams);
        $arrayNumTeams = mysqli_fetch_array($resultNumTeams);

        for($i=$arrayNumTeams['number'];)
        */

        $member = "SELECT * FROM employee";
        $resultMember = mysqli_query($connect, $member);

        while($arrayMember = mysqli_fetch_array($resultMember)){
            ?>
                <h1><?php echo $arrayMember['emp_fname'] . " " . $arrayMember['emp_lname']; ?></h1>
            <?php
        }
        exit();
        mysqli_close($connect);
    }

的script.js

//------------- ACCORDION DISPLAY DATA ------------//

function displayTeamFromDatabase($){
    $.ajax({
        url: "http://localhost:81/chansandbox/wp-content/themes/Skeleton/teams.php",
        method: "POST",
        async: false,
        data: {
            "display": 1
        },
        success: function(d){
            $("#teamholder").html(d);
        }
    });
}

function displayMemberFromDatabase($){
    $.ajax({
        url: "http://localhost:81/chansandbox/wp-content/themes/Skeleton/members.php",
        method: "POST",
        async: false,
        data: {
            "display": 1
        },
        success: function(d){
            $("#memberholder").html(d);
        }
    });
}

正如您所看到的那样,我试图将员工表的所有数据显示给响应式手风琴的每个选项卡,它为团队表中的每个条目生成一个新选项卡。我不明白的是,为什么只有第一个选项卡具有employee表中的数据列表。

任何回复都将不胜感激,谢谢。

我也使用本指南作为团队和members.php的参考 https://www.youtube.com/watch?v=gTQU_veJ6Kk&feature=youtu.be&t=1391

1 个答案:

答案 0 :(得分:0)

取而代之的是$(&#34;#teamholder&#34;)。html(d);使用方法:

$("[id=teamholder]").each(function(){
   $(this).html(d);
});

而是$(&#34;#memberholder&#34;)。html(d); :

$("[id=memberholder]").each(function(){
   $(this).html(d);
});