来自 php 中 foreach 的 Javascript 数据。

Question

与我之前的问题相关: How to use javascript load function twice? (load in load)

我已经让一切正常工作(加载加载)。但现在我想使用 foreach 将数据发送到第二个负载。

当我使用这个 foreach 时，数据(POST ID)保持不变。

示例代码:

<script >
    $(document).ready(function () {
        // Forum categories
        $("#main").on("click", "#message", function () {
            $("#getmessage").load("forum/getmessage.php", {'id': $("#id").val()});
        });
    });
</script >

<?php foreach($stickies as $sticky): ?>
                <form id="form_id" >
                    <a href="#" class="list-group-item small" id="message"
                       style="background-color:black; color:white;" >
                        <span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span >
                        | <?php echo $sticky['header']; ?>
                    </a >

                    <input type="hidden" id="id" name="id" value="<?php echo $sticky['id']; ?>" >

                </form >
            <?php endforeach; ?>

如您所见，我想将值 ID 作为 POST 数据推送，以便加载的文件可以对此 POST ID 执行查询。

如何为每个 foreach 发送正确的 ID？

Answer 1

有很多方法可以实现您的需求。所以这只是一个例子。

首先 - id 属性的值必须是唯一的。没有异常(exception)。这就是为什么每个 a 的 id="message" 和每个 input 的 id="id" 都是 无效。对于相似的元素 - 使用类。

固定代码为:

<?php foreach($stickies as $sticky): ?>
    <form>
        <a href="#" class="list-group-item small js-message"
           style="background-color:black; color:white;" >
            <span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span >
            | <?php echo $sticky['header']; ?>
        </a >
        <input type="hidden" name="id" value="<?php echo $sticky['id']; ?>" >
    </form >
<?php endforeach; ?>

如您所见，我删除了具有相同值的 id 属性。对于 input 和 form ，您甚至不需要它们，对于 a ，我添加了类 js-message。

接下来是处理程序:

$(document).ready(function () {
    // Forum categories
    $("#main").on("click", ".js-message", function () {
        // ways of getting value id can be different.
        $("#getmessage").load(
            "forum/getmessage.php", 
             {'id': $(this).parent().find("input").val()
        });

        // optionally you can add
        return false;
        // to prevent default click action which in case
        // of link is scrolling to the top of a page
    });
});

这里，作为我使用的获取值(value)的方式之一

$(this).parent().find("input").val()

这是:

$(this).parent()    // find a parent of a clicked a, it will be `form`
    .find("input")  // among `form` children find `input`
    .val()          // take value from found input

当然，如果您的标记发生变化并且表单上将出现更多输入，则这可能会停止工作。但这只是一个示例，您可以根据需要进行修改。