Question

$('.my-button').click(function(e)函数应该显示display.php的输出，它只包含一些mysql查询和html输出。它到目前为止工作，但当我为每个帖子循环按钮本身时，该功能仅适用于第一个按钮。我需要让脚本理解，对于每个按钮，它应该只显示该按钮的结果。但是如何将一些个人ID插入$(".responsecontainer").html(response);？我尝试$(".responsecontainer" + id).html(response);获取＆＃34; id＆＃34;在via参数之前，但似乎这个id必须是硬编码的。

以下是完整代码：

$(document).ready(function() {
$('.my-button').click(function(e) {                
  $.ajax({    //create an ajax request to display.php
    type: "GET",
    url: "display.php",             
    dataType: "html",   //expect html to be returned                
    success: function(response){                    
        $(".responsecontainer").html(response); 
        //alert(response);
    }

这是显示结果的按钮和DIV：

<input type="button" class="my-button" value="'.$plus.'" />
<div class="responsecontainer" id="'.$plus.'" align="center">
</div>

注意到$plus始终是唯一的。

Answer 1

使用data-attributes存储相关的DIV ID。
点击按钮后，获取data-attribute，即：data-target-id。
使用id，您可以执行以下选择：#div_1并插入收到的HTML。
不要使用值来定位你的DIV，按钮的值是你的按钮的文字，想象一下你的按钮文本是用i18n填充的翻译。

$(document).ready(function() {
  $('.my-button').click(function(e) {
      var targetId = $(this).data('target-id');
      /*$.ajax({ //create an ajax request to display.php
          type: "GET",
          url: "display.php",
          dataType: "html", //expect html to be returned                
          success: function(response) {*/
            $(`#${targetId}`).html(`Response = ${targetId}`);
          /*});
      });*/
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" data-target-id='div_1' class="my-button" value="Click me!" />
<div id='div_1' class="responsecontainer" align="center">
</div>

<input type="button" data-target-id='div_2' class="my-button" value="Click me!" />
<div id='div_2' class="responsecontainer" align="center">
</div>

<input type="button" data-target-id='div_3' class="my-button" value="Click me!" />
<div id='div_3' class="responsecontainer" align="center">
</div>

Answer 2

由于按钮的值和div的id相同（$plus），只需捕获按钮的值并使用它来告诉您要更新的div：

$('.my-button').click(function(e){
    e.preventDefault();
    var buttonVal = $(this).val(); // the value of the button which should match the id of the container to be updated
    var response = 'button ' + buttonVal + ' clicked';
    $('#' + buttonVal).html(response); 

})

这是一个example。

假设按钮是div的兄弟（如注释中所述），代码变为this，div不需要id：

$('.my-button').click(function(e){
    e.preventDefault();
    var buttonVal = $(this).val(); // just using this to get something to display
    var response = 'button ' + buttonVal + ' clicked'; // same here
    $(this).next('div').html(response); 

})

这是example。

显示多个Ajax html响应

2 个答案: