javascript - 如何获取我的页面上每个帖子的 id？

Question

我正在尝试在 js 中发送帖子 ID。我可以发送第一个帖子 ID，但如何发送每个帖子的 ID。检查元素看起来像这样

<div  data-id="post_1"></div>
<div  data-id="post_2"></div>
<div  data-id="post_3"></div>


<script type="text/javascript" >
 function ajax(){

    var req = new XMLHttpRequest();

    req.onreadystatechange = function(){

    if(req.readyState == 4 && req.status == 200){

    document.querySelector('[data-id=post_1]').innerHTML = req.responseText;
    } 
    }
    req.open('GET','chat.php?id=1>',true); 
    req.send();

    }
    setInterval(function(){ajax()},1000);


</script>   

这是代码

<div  data-id="post_<?php echo $post_id;?>"></div>



<script type="text/javascript" >
 function ajax(){

    var req = new XMLHttpRequest();

    req.onreadystatechange = function(){

    if(req.readyState == 4 && req.status == 200){

    document.querySelector('[data-id=post_<?=$post_id?>]').innerHTML = req.responseText;
    } 
    }
    req.open('GET','chat.php?id=<?=$post_id?>',true); 
    req.send();

    }
    setInterval(function(){ajax()},1000);


</script>    

所有帖子都在同一页面上。但我只能获取一篇帖子的 id。如何在js中获取id post_2 和 post_3 ？

js 显示每个帖子的评论。只有第一篇文章显示评论，因为 js 只获取第一篇文章的 id。其余的没有显示任何东西。

我怎样才能对每个帖子做同样的事情？

Answer 1

querySelector 永远不会为您提供超过 1 个元素。如果您需要满足查询的所有元素，请使用 querySelectorAll。

在 JS 代码中使用 PHP 意味着它只会使用 1 个 post_id

最简单的方法是向您的 div 添加一个 class 或其他data-attribute:

<div data-type="post" data-id="1">a</div>
<div data-type="post" data-id="3">b</div>
<div data-type="post" data-id="2">c</div>

您可以使用新的属性来获取所有它们并迭代它们。

var elements = document.querySelectorAll('[data-type="post"]')
for (var i = 0; i < elements.length; i++) {
  var postId = elements[i].getAttribute('data-id')
  // do ajax stuff
  // ... then
  elements[i].innerHTML = 'ajax response'
}

https://jsfiddle.net/w6kazkm1/4/

编辑:误解了你的问题。答案现已更新。