Question

我试图创建一个功能，允许在页面上放置一个空的div代码片段，然后用Javascript替换为更复杂的标记。问题是，当页面上有多个这些空div时，它只显示一个，它使用的那个似乎是随机的。我认为循环存在问题。

我在div上使用数据属性来存储所需行的数据库ID。

<div data-foo="25"></div>

页面上可以包含任意数量的这些内容，因此javascript需要搜索带有＆＃39; data-foo＆＃39;属性，然后循环它们。从数据库中检索信息，并使用php文件生成输出。这将返回到javascript并用相同的data-foo id替换空div。

Javascritp / jQuery的

    var profiles = document.querySelectorAll('[data-foo]');
    // console.log(profiles);

    if(profiles.length) {
        for(var i = 0; i < profiles.length; i++) {
            var profileId = profiles[i].dataset.foo;
            // console.log('[data-foo="' + profileId +'"]');

            $.ajax({ 
                url: '/file/path/profile.php',
                data: {
                    profile: profiles[i].dataset.foo
                },
                type: 'get',
                success: function(response) {
                    $('[data-foo="' + profileId + '"]').replaceWith(response);
                }
            });
        }
    }

PHP

php使用上面的循环运行js找到的每个id，但是我猜测只有一个正在输出，因为循环在页面上显示之前完成了吗？

if(isset($_GET['profile'])) {
    try {
        $sth = $dbh -> prepare("SELECT * FROM profiles WHERE id = :profile");
        $sth -> bindParam(':profile', $_GET['profile'], PDO::PARAM_INT);
        $sth -> execute();
    } catch(PDOException $e) {
        pdo_caught($e);
    }
    $result = $sth -> fetch(PDO::FETCH_ASSOC);
}

if(!empty($result)) {
    echo '<div class="profile">
            <img src="/img/'.$result["picture"].'" alt="'.$result['name'].'">
            <h3>'.$result["name"].'</h3>
            <p>'.$result["quote"].'</p>
        </div>';
}

Answer 1

我打赌关闭问题，试试这个：

var profiles = document.querySelectorAll('[data-foo]');
    // console.log(profiles);

    if(profiles.length) {
        for(var i = 0; i < profiles.length; i++) {
            (function(i) {
                var profileId = profiles[i].dataset.foo;
                // console.log('[data-profile="' + profileId +'"]');

                $.ajax({ 
                    url: '/file/path/profile.php',
                    data: {
                        profile: profiles[i].dataset.profile
                    },
                    type: 'get',
                    success: function(response) {
                        $('[data-foo="' + profileId + '"]').replaceWith(response);
                    }
                });
            })(i)
        }
    }

<强>解释

当执行成功函数时，它接受来自闭包范围的变量profileId。此时变量profileId具有循环的最后一次迭代的值，即。 profiles[profiles.length - 1].dataset.foo。因此，您可以使用AJAX请求中的每个响应替换相同的div。由于AJAX是异步的，你不知道你将收到响应的顺序，你在该div中有一个随机的结果，因为最后的显示是你得到的最后一个响应。

修改

以下是使用Jquery选择器和每个选项的解决方案：

$('[data-foo]').each(function() { var self = $(this), profileId = self.data('foo') ; $.ajax({ url: '/file/path/profile.php', data: { profile: profileId }, type: 'get', success: function(response) { self.replaceWith(response); } }); });

Answer 2

使用更好的东西：

jQuery('[data-foo]').each(function () {
    var $this = $(this)

    $this.load('/file/path/profile.php?profile=' + $this.dataset.foo)
})

Answer 3

你可以尝试这样的循环方式http://jsfiddle.net/fb5ykj93/

$("div[data-foo]").each(function () {
    alert($(this).data("foo"));
});

用jQuery / AJAX生成的标记替换页面上的多个空div

Javascritp / jQuery的

PHP

3 个答案: