Question

我日复一日地变得越来越疯狂，我找不到答案，我花了100h +这个...我希望有人可以帮助我！

更新：所以为了让自己在这个问题上更清楚并且能够得到别人的帮助，我基本上有3个名为“main-container”的容器，它们都有3个容器作为孩子，所有这些容器都有相同的类名，当我提交按钮时，我触发一个ajax函数来加载从php进入子div的JSON字符串，问题是我得到3“main_containers”同时加载ajax，我只想加载ajax如果我分别按下每个“main_container”按钮。

我一直在使用jquery和vanilla JS，但似乎我无法完成它！

这是我当前使用jquery触发按钮的方式：

$('.trigger_button_inside_divs').click(my_ajax_function);

这就是我的ajax的样子：

function my_ajax_function(){
$.ajax({
        dataType: "JSON",
        type: 'POST',
        url: test.php,
        success: function(data) {

     $('.div_to_render_JSON_1').html(data.PHP_JSON_1_RECEIVED);
     $('.div_to_render_JSON_2').html(data.PHP_JSON_2_RECEIVED);
     $('.div_to_render_JSON_3').html(data.PHP_JSON_3_RECEIVED);

        }
    });
}

HTML看起来像这样：

<div class="main_container">
    <div class="my_div">
     //div_to_render_JSON_1
    </div>

        <div class="my_div">
          //div_to_render_JSON_2
        </div>

   <div class="my_div">
   //div_to_render_JSON_3
   </div>

   <button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>



<div class="main_container">
    <div class="my_div">
     //div_to_render_JSON_1
    </div>

        <div class="my_div">
          //div_to_render_JSON_2
        </div>

   <div class="my_div">
   //div_to_render_JSON_3
   </div>

   <button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>



<div class="main_container">
    <div class="my_div">
     //div_to_render_JSON_1
    </div>

        <div class="my_div">
          //div_to_render_JSON_2
        </div>

   <div class="my_div">
   //div_to_render_JSON_3
   </div>

   <button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>

总而言之，这6个“div”中的每一个都有一个触发包含我的ajax的函数的按钮，以在该特定div内呈现。但我得到的是每次单击该触发按钮时，我都会在所有6个div中渲染ajax，而不是仅在单击其特定按钮时在每个特定div上渲染。

非常感谢，我真的希望能够完成这项工作！欢呼声。

PD： 这是程序员为实现我想要实现的目标所做的事情，但我无法弄清楚这段代码中是什么使点击1按钮并影响那个html元素，即使他们都有同一个班级。

(function(){
$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});



var xhr = new XMLHttpRequest();
var el;




function SetDataInTheForm()
{
    var resp = JSON.parse(xhr.response)
    var pt=0
    var ct=0
    var gt=0

    Array.prototype.forEach.call(el.querySelectorAll(".test"),function(e,i){
        e.innerHTML=resp[i].name
    })
    Array.prototype.forEach.call(el.querySelectorAll(".p"),function(e,i){
        e.innerHTML=parseFloat(resp[i].p).toFixed(0)
        pt+=parseFloat(resp[i].p)
    })
    Array.prototype.forEach.call(el.querySelectorAll(".c"),function(e,i){
        e.innerHTML=parseFloat(resp[i].c).toFixed(0)
        ct+=parseFloat(resp[i].c)
    })
    Array.prototype.forEach.call(el.querySelectorAll(".g"),function(e,i){
        e.innerHTML=parseFloat(resp[i].g).toFixed(0)
        gt+=parseFloat(resp[i].g)
    })


    el.querySelector(".wtp").innerHTML=parseFloat(resp[0].total).toFixed(0)+" "+resp[0].unit
    el.querySelector(".wtc").innerHTML=parseFloat(resp[1].total).toFixed(0)+" "+resp[1].unit
    el.querySelector(".wtg").innerHTML=parseFloat(resp[2].total).toFixed(0)+" "+resp[2].unit

    el.querySelector(".pt").innerHTML=pt.toFixed(0)
    el.querySelector(".ct").innerHTML=ct.toFixed(0)
    el.querySelector(".gt").innerHTML=gt.toFixed(0)
}




function HandleSubmit(e)
{
    el=e.currentTarget
    e.preventDefault();
    xhr.open("POST","/url_here.php",true)
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    xhr.onload=SetDataInTheForm
    var button=e.currentTarget.querySelector("input[type=submit][clicked=true]")
    button.removeAttribute("clicked")
    xhr.send($("#"+e.currentTarget.id).serialize()+"&"+button.getAttribute("name")+"=on")
}



[].forEach.call(document.querySelectorAll("._form_"),function(form){
    form.addEventListener("submit",HandleSubmit,false);
})


})()

Answer 1

请记住，<?php $loop = new WP_Query( array( 'post_type' => 'post' ?> <p>Something here</p> <?php endwhile; wp_reset_query(); ?>是一个新的选择器，可选择具有类$('.div_container_to_render_JSON')的所有元素。你想要发生的是弄清楚点击的来源，并找到相应的div_container_to_render_JSON。

幸运的是，jQuery点击处理程序将div_container_to_render_JSON关键字设置为捕获点击的HTMLElement。您可以使用它来获取父元素。

this

Answer 2

问题是你的班级选择器确实同时选择了所有的div。

解决方案，为您的div设置标识符：

<div class="my_div" id="my_div_1">

然后您可以使用这些ID填写数据：

$('#my_div_1').html(data.PHP_JSON_1_RECEIVED);

并重复你的6个div（注意从类选择器'。'到标识符选择器'＃'的更改）

Answer 3

感谢回复人们。经过几天的努力，我终于想通了，这真的很简单......这就是答案：

$('.trigger_button_inside_divs').click(my_ajax_function);


var thisButton = $(this);
var thisDiv = thisButton.closest(".main_container"); 




 function my_ajax_function(){
$.ajax({
        dataType: "JSON",
        type: 'POST',
        url: test.php,
        success: function(data) {

     thisDiv.find('.div_to_render_JSON_1').html(data.PHP_JSON_1_RECEIVED);
     thisDiv.find('.div_to_render_JSON_2').html(data.PHP_JSON_2_RECEIVED);
     thisDiv.find('.div_to_render_JSON_3').html(data.PHP_JSON_3_RECEIVED);

        }
    });
}

如何在具有相同类名的div中单独接收AJAX（json）响应？

3 个答案: