php - jQuery 的 .html() 函数仅适用于第一个元素

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

团队.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);
    }

成员.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);
    }

脚本.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);
        }
    });
}

正如您所看到的,我正在尝试将员工表的所有数据显示到响应式 Accordion 的每个选项卡,它会为团队表中的每个条目生成一个新选项卡。我不明白的是为什么只有第一个选项卡包含员工表中的数据列表。

如有任何回复,我们将不胜感激,谢谢。

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

最佳答案

改为 $("#teamholder").html(d);使用:

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

而是 $("#memberholder").html(d); :

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

关于php - jQuery 的 .html() 函数仅适用于第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43772725/

相关文章:

php - 从 SQL 数组中添加字符串长度

php - 向用户显示脚本正在加载

php - 如何通过 PHP 创建由点组成的文本图像?

html - 元素显示的 CSS 问题

php - 数据库插入不工作(MySQL、PHP)

jquery - 对象数组,获取数组中的第一个对象

javascript - 跳出ajax循环

Javascript - onclick 函数更改 bool 值并更改 attr 可见性

javascript - 如何在移动模拟器中查看我的 HTML 网页并使我的代码更高效?

html - CSS 垂直对齐和 fancyBox