Fatal编程技术网
  • javascript/
  • Javascript 为什么第一个按钮发送它们的种类值，而其他按钮不能，每个容器

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

javascript

Javascript 为什么第一个按钮发送它们的种类值，而其他按钮不能，每个容器,javascript,Javascript,更新：面向未来读者 已经提供了解决方案，请确保您查看下面我的答案和charlietfl的答案 解决方案发布前发布 我有一个脚本，它将值发送到页面调用x.php。它的工作方式是每个红色容器都有自己的输入和按钮，因此如果您单击任何 对于那些红色的容器按钮，它会将它们的容器输入值发送到x.php页面，以便可以回显这些值 问题是，它可以发送任何按钮请求，但它只发送第一个红色容器输入值，如果我要这样做，它只发送第一个红色容器输入值以进行回显 但不是他们自己的，所以我怎样才能以一种方式发送他们的红色容器值呢

更新：面向未来读者

已经提供了解决方案，请确保您查看下面我的答案和charlietfl的答案

解决方案发布前发布

我有一个脚本，它将值发送到页面调用x.php。它的工作方式是每个红色容器都有自己的输入和按钮，因此如果您单击任何

对于那些红色的容器按钮，它会将它们的容器输入值发送到x.php页面，以便可以回显这些值

问题是，它可以发送任何按钮请求，但它只发送第一个红色容器输入值，如果我要这样做，它只发送第一个红色容器输入值以进行回显

但不是他们自己的，所以我怎样才能以一种方式发送他们的红色容器值呢

这就是如果我让它按照我想要的方式工作，它会是什么样子

这是密码

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>-->

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

<style>

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

.dataContainerDesign .first_name,.last_name,.send{
  display: block;
  margin: auto;
}

 </style>

    <script>

document.addEventListener('DOMContentLoaded', function(){

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

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

function dataContainerProcess(execution){

var send = execution.currentTarget;
  var dataContainer = send.parentNode;

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

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

    var data = new FormData();

  //Var structrue
   var first_name=  dataContainer.querySelector('.first_name').value;
   var last_name=  dataContainer.querySelector('.last_name').value;
   var image=  dataContainer.querySelector('.image').files[0];
//

//Data var
data.append('first_name', first_name);
data.append('last_name', last_name);
data.append('image',image);
//
    xhr.open('POST','x'); 
    xhr.send(data);
}

});

    </script>

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

<?php

$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];

if($_FILES['image']['name'] != '')
{
 $image_test = explode('.', $_FILES['image']['name']);
 $image_ext = end($image_test);
 $image_prefix= 'random';
 $image_file_name = $image_prefix . uniqid() . '.' . $image_ext;
 $image_directory = 'images/';
 $image_location = $image_directory.$image_file_name;  
 move_uploaded_file($_FILES['image']['tmp_name'], $image_location);

 $profile_image= $image_location;
}

?>

<style>

img{
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
}

h1{
    text-align: center;
    margin: 0;
}

</style>

<img src='<?php echo $profile_image; ?>'>
<h1><?php echo $first_name; ?></h1>
<h1><?php echo $last_name; ?></h1>


.数据容器{
背景色：红色；
宽度：185px；
位置：相对位置；
边缘底部：25px；
}
.dataContainerDesign.a、.b、.send{
显示：块；
保证金：自动；
}
document.addEventListener（'DOMContentLoaded'，function（）{
var containerButtons=document.querySelectorAll（'.dataContainer.send'）；
对于（变量i=0；i
x.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>-->

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

<style>

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

.dataContainerDesign .first_name,.last_name,.send{
  display: block;
  margin: auto;
}

 </style>

    <script>

document.addEventListener('DOMContentLoaded', function(){

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

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

function dataContainerProcess(execution){

var send = execution.currentTarget;
  var dataContainer = send.parentNode;

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

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

    var data = new FormData();

  //Var structrue
   var first_name=  dataContainer.querySelector('.first_name').value;
   var last_name=  dataContainer.querySelector('.last_name').value;
   var image=  dataContainer.querySelector('.image').files[0];
//

//Data var
data.append('first_name', first_name);
data.append('last_name', last_name);
data.append('image',image);
//
    xhr.open('POST','x'); 
    xhr.send(data);
}

});

    </script>

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

<?php

$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];

if($_FILES['image']['name'] != '')
{
 $image_test = explode('.', $_FILES['image']['name']);
 $image_ext = end($image_test);
 $image_prefix= 'random';
 $image_file_name = $image_prefix . uniqid() . '.' . $image_ext;
 $image_directory = 'images/';
 $image_location = $image_directory.$image_file_name;  
 move_uploaded_file($_FILES['image']['tmp_name'], $image_location);

 $profile_image= $image_location;
}

?>

<style>

img{
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
}

h1{
    text-align: center;
    margin: 0;
}

</style>

<img src='<?php echo $profile_image; ?>'>
<h1><?php echo $first_name; ?></h1>
<h1><?php echo $last_name; ?></h1>
问题在于
document.querySelector（'.a'）
将返回在文档中找到的具有该类的第一个元素

您需要在特定按钮的同级中查找该类

一种方法是隔离按钮的父级，并在该父级中查询。我省略了XHR和FormData，只是为了简化演示并将相关值记录到控制台

document.addEventListener（'DOMContentLoaded'，function（）{
var containerButtons=document.querySelectorAll（'.dataContainer.send'）；
对于（变量i=0；i

邮寄
邮寄
邮寄
邮寄
感谢charlietfl教我如何解决这个问题，因为charlietfl我能够解决这个问题，所以我很荣幸将charlietfl的答案作为提示解决方案，但我结合了charlietfl的答案

以防将来的读者想知道这本书是如何完成的，我一直想知道它是如何完成的

好的，这是运行的完整代码

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>-->

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

<style>

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

.dataContainerDesign .first_name,.last_name,.send{
  display: block;
  margin: auto;
}

 </style>

    <script>

document.addEventListener('DOMContentLoaded', function(){

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

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

function dataContainerProcess(execution){

var send = execution.currentTarget;
  var dataContainer = send.parentNode;

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

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

    var data = new FormData();

  //Var structrue
   var first_name=  dataContainer.querySelector('.first_name').value;
   var last_name=  dataContainer.querySelector('.last_name').value;
   var image=  dataContainer.querySelector('.image').files[0];
//

//Data var
data.append('first_name', first_name);
data.append('last_name', last_name);
data.append('image',image);
//
    xhr.open('POST','x'); 
    xhr.send(data);
}

});

    </script>

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

<?php

$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];

if($_FILES['image']['name'] != '')
{
 $image_test = explode('.', $_FILES['image']['name']);
 $image_ext = end($image_test);
 $image_prefix= 'random';
 $image_file_name = $image_prefix . uniqid() . '.' . $image_ext;
 $image_directory = 'images/';
 $image_location = $image_directory.$image_file_name;  
 move_uploaded_file($_FILES['image']['tmp_name'], $image_location);

 $profile_image= $image_location;
}

?>

<style>

img{
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
}

h1{
    text-align: center;
    margin: 0;
}

</style>

<img src='<?php echo $profile_image; ?>'>
<h1><?php echo $first_name; ?></h1>
<h1><?php echo $last_name; ?></h1>


.数据容器{
背景色：红色；
宽度：205px；
位置：相对位置；
边缘底部：25px；
}
.dataContainerDesign.first_name、.last_name、.send{
显示：块；
保证金：自动；
}
document.addEventListener（'DOMContentLoaded'，function（）{
var dataContainerSendButtons=document.querySelectorAll（'.dataContainer.send'）；
对于（var i=0；i
x.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>-->

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

<style>

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

.dataContainerDesign .first_name,.last_name,.send{
  display: block;
  margin: auto;
}

 </style>

    <script>

document.addEventListener('DOMContentLoaded', function(){

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

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

function dataContainerProcess(execution){

var send = execution.currentTarget;
  var dataContainer = send.parentNode;

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

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

    var data = new FormData();

  //Var structrue
   var first_name=  dataContainer.querySelector('.first_name').value;
   var last_name=  dataContainer.querySelector('.last_name').value;
   var image=  dataContainer.querySelector('.image').files[0];
//

//Data var
data.append('first_name', first_name);
data.append('last_name', last_name);
data.append('image',image);
//
    xhr.open('POST','x'); 
    xhr.send(data);
}

});

    </script>

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='first_name' type='text'>
      <input class='last_name' type='text'>
      <input class='image' type='file'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

<?php

$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];

if($_FILES['image']['name'] != '')
{
 $image_test = explode('.', $_FILES['image']['name']);
 $image_ext = end($image_test);
 $image_prefix= 'random';
 $image_file_name = $image_prefix . uniqid() . '.' . $image_ext;
 $image_directory = 'images/';
 $image_location = $image_directory.$image_file_name;  
 move_uploaded_file($_FILES['image']['tmp_name'], $image_location);

 $profile_image= $image_location;
}

?>

<style>

img{
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
}

h1{
    text-align: center;
    margin: 0;
}

</style>

<img src='<?php echo $profile_image; ?>'>
<h1><?php echo $first_name; ?></h1>
<h1><?php echo $last_name; ?></h1>


img{
显示：块；
宽度：200px；
高度：200px；
保证金：自动；
}
h1{
文本对齐：居中；
保证金：0；
}
'>
谢谢charlietfl我在控制台中测试了这一点，您的示例看起来不错，但是我如何基于我的代码集成您的示例，因为我尝试将您的方法集成到我的代码中，但它仍然发送第一个容器值您能否提供FormData（）中包含的我的代码示例使用您的方法，我没有任何错误，如果您不介意的话，它只发送第一个容器值。一个问题是您需要为每个请求使用一个新的
XMLHttpRequest
，并且使用
querySelector（'.dataContainer'）
我正在做的是在
perContainer（）中创建请求
并使用
div
以响应数据为目标，更新链接，如下所示