2

我在处理我正在处理的问题时遇到了一些麻烦。基本上，如果有人单击带有办公室列表的链接，它将对查询数据库的文件进行 AJAX 调用并以 JSON 对象的形式返回结果。此时，它需要获取这些值并循环遍历 HTML 并相应地应用这些值。我无法弄清楚究竟是如何制作这个循环。可以这么说，我正在撞墙。这是在 Wordpress 中并使用一个名为 PODS 的插件。

的HTML

<?php
    $staff = new Pod('staff');
    $staff->findRecords('name ASC');
    $total_staff = $staff->getTotalRows();
?>

<?php if( $total_staff>0 ) : ?>

    <div class="twelve">
        <div class="team-title">Corporate Office</div>
    </div>
    <div id="team-photo-container">
    <?php while ( $staff->fetchRecord() ) : ?>
            <?php

                $staff_id        = $staff->get_field('id');
                $staff_name      = $staff->get_field('name');
                $staff_title     = $staff->get_field('staff_title');
                $staff_bio       = $staff->get_field('staff_bio');
                $staff_fav_apps  = $staff->get_field('staff_favorite_apps');
                $staff_office    = $staff->get_field('staff_office');
                $staff_pic       = $staff->field('staff_pic.guid');
                $staff_slug      = $staff->get_field('permalink');
            ?>
            <div class="packery">
                <div class="team-img">
                    <div class="imgs">
                        <img class="team-photo" src="<?php echo $staff_pic; ?>" alt="">
                        <div class="img-info">
                            <div class="mem-name"><?php echo $staff_name; ?></div>
                            <div class="mem-title"><?php echo $staff_title; ?></div>
                        </div>
                        <div class="ind-bio">
                            <div class="twelve columns btns">
                                <ul>
                                    <li>
                                        <a href="#" target="_self" class="read-more close">
                                            <span>
                                                <i class="foundicongen-remove"></i>Close
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_self" class="read-more">
                                            <span>
                                                <i class="foundicon-plus"></i>Share 
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <h3 class="team-member-name"><?php echo $staff_name; ?></h3>
                            <h5 class="team-member-title"><?php echo $staff_title; ?></h5>
                            <p><?php echo $staff_bio; ?></p>
                            <div class="twelve">
                                <ul>
                                    <li>
                                        <a href="#" target="_self" class="read-more">
                                            <span>
                                                <i class="foundiconsoc-youtube"></i>Watch Video
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="twelve favorites team-title">
                                <span>Favorite Apps:</span>
                                <ul>
                                    <li>
                                        <a href="#" target="_self">
                                            <span>
                                                <?php echo $staff_fav_apps; ?>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endwhile ?>
            <?php endif ?>

PHP/SQL

<?php
    $office = $_GET['office'];

    $link = mysql_pconnect("localhost", "username", "password") or die("Could not connect");

    mysql_select_db("database") or die("Could not select database");

    $arr = array();

    $query = mysql_query("SELECT name, staff_title, staff_bio, staff_favorite_apps, staff_office FROM table WHERE staff_office ='" . $office . "'");

    while($obj = mysql_fetch_object($query)) 
    {
        $arr[] = $obj;
    }

    echo '{"members":'. json_encode($arr). '}';

    ?>

jQuery/AJAX

$('.category-submenu li').click(function(){
        $.ajax({
            type: "GET",
            url: "http://localhost:8888/wp-content/themes/wp-foundation/load-team.php",
            dataType: 'json',
            data: {office: $(this).data('office')},
            beforeSend: function() {
                $('#team-photo-container').html("<div class='loader'><img src='http://localhost:8888/wp-content/themes/wp-foundation/images/ajax-loader.gif' /></div>");
            },
            success: function(data) {
                $('.team-title').html(data['members'][0]['staff_office'] + ' Office');
                $.each( data, function(i, item) {
                    $('#team-photo-container').html();
                });
            }
        });
    });

现在在检查结果时，我得到这样的 json 对象：

{"members":[{
             "name":"Bruce Willis",
             "staff_title":"Title Here",
             "staff_bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             "staff_favorite_apps":"ZULILY, INSTAGRAM, PBA CHALLENGE",
             "staff_office":"City"
            },
            {
             "name":"Bruce Jenner",
             "staff_title":"Title Here",
             "staff_bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             "staff_favorite_apps":"ZULILY, INSTAGRAM, PBA CHALLENGE",
             "staff_office":"City"
            }]
           }

如您所见，如果我在一个办公室有 5 个人，但在另一个办公室只有 3 个，我需要删除 5 并用 3 替换它们，同时动态生成 html 或替换值。

任何帮助将不胜感激，因为我在这一点上很难过。

4

1 回答 1

2

按照此格式删除现有 HTML 并生成替换 HTML：

var something = [{
             "name":"Bruce Willis",
             "staff_title":"Title Here",
             "staff_bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             "staff_favorite_apps":"ZULILY, INSTAGRAM, PBA CHALLENGE",
             "staff_office":"City"
            },
           {
             "name":"Bruce Jenner",
             "staff_title":"Title Here",
             "staff_bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             "staff_favorite_apps":"ZULILY, INSTAGRAM, PBA CHALLENGE",
             "staff_office":"City"
           }];

$(".team-photo-container").html("");
for(var key in something){
    $(".team-photo-container").append("<div class = 'packery'></div>");
    $(".packery:last").append("<div>" + something[key]["name"] + "</div>");
    //add the rest of the inner DIVs
}

如您所见，您必须编写相当多的 JavaScript 才能生成内部 DIV。有一种替代方法。您可以通过请求发送编译后的 HTML，而不是通过 AJAX 请求发送 JSON 值。您将能够在 AJAX 页面上重用原始页面中的大部分 PHP/HTML。将通过 AJAX 请求传输更多数据，但您将拥有更清晰的视图表，因为 HTML 将在您的 AJAX 页面上编译。然后，您可以使用以下成功回调来重新加载您的“团队照片容器”DIV：

success: function(data) {
                $(".team-photo-container").html(data);
            }
于 2013-10-08T02:54:22.373 回答