Question

更新：面向未来的读者

已提供解决方案，请务必查看我的答案以及下面的问题解答。

在解决方案之前发布

我创建了这个脚本，它将值发送到页面调用x.php。它的工作方式是每个红色容器都有自己的输入和按钮，所以如果你点击任何

这些红色容器按钮会将其容器输入值发送到页面x.php，以便可以回显这些值。

问题是它可以发送任何按钮请求，但它只发送第一个红色容器输入值，如果我对其他容器执行该操作，它只发送第一个红色容器输入值以进行回显

但不是他们自己的，所以我怎么能以发送红色容器值的方式来做。

如果我按照我希望的方式工作，这就是它的样子

.gif-screenshot

这是代码

的index.php

<style>

    .dataContainer{
      background-color: red;
      width: 185px;
      position: relative;
      margin-bottom: 25px; 
    }

    .dataContainerDesign .a,.b,.send{
      display: block;
      margin: auto;
    }

 </style>

    <script>
   document.addEventListener('DOMContentLoaded', function(){

var containerButtons = document.querySelectorAll('.dataContainer .send');

 for (var i = 0; i < containerButtons.length; i++) {
   containerButtons[i].addEventListener('click', perContainer);
 }

var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){

    if(xhr.readyState === 4){
        document.querySelector('.dataContainer').innerHTML= xhr.responseText;
    }
};

function perContainer(){

    var data = new FormData();

  //Var structrue
  var a=  document.querySelector('.a').value;
  var b=  document.querySelector('.b').value;
//

//Data var
data.append('a', a);
data.append('b', b);
//
    xhr.open('POST','x'); 
    xhr.send(data);
}
});
    </script>

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

x.php

<p style='display: inline-block;'>
<?php
$a= $_POST['a'];
$b= $_POST['b'];
echo 'Sent Values: ';
echo $a.','.$b;
?>
</p>

为什么第一个按钮发送它们的类型值，但其他按钮不能发送每个容器

0 个答案: