php - 如何在php中的ajax成功时更新子div元素

Question

我想更新子 div，但所有 div 都在 ajax 成功时更新。

我的html

<div class="add_wishlist">
<input type="hidden" name="prd_wishlist" class="prd_wishlist" value="1">
     <div class="wishlist_icon">
       <p><i class="far fa-heart"></i></p>
     </div>
</div>
<div class="add_wishlist">
<input type="hidden" name="prd_wishlist" class="prd_wishlist" value="2">
     <div class="wishlist_icon">
       <p><i class="far fa-heart"></i></p>
     </div>
</div>

Jquery

$('.add_wishlist').click(function(){

var prd_wish = $(this).find("[name='prd_wishlist']").val()

$.ajax({
    type: 'post',
    url: weburl+'pages/login-script.php',
    data: {
        prd_wish:prd_wish,
        wishlist_submit:'submit',
    },
    success: function (response) {
        
        $('.add_wishlist').children('.wishlist_icon').html(response)
    }
});
})

我还尝试使用 $('.add_wishlist').children('.wishlist_icon').html(response) 更新代码，但它不起作用。

Answer 1

在点击处理程序中存储对所点击的 .add_wishlist 元素的引用，然后在 success 处理程序中使用该引用:

$('.add_wishlist').click(function() {
  let $addWishlist = $(this);
  let prd_wish = $addWishlist.find("[name='prd_wishlist']").val()

  $.ajax({
    type: 'post',
    url: weburl + 'pages/login-script.php',
    data: {
      prd_wish: prd_wish,
      wishlist_submit: 'submit',
    },
    success: function(response) {
      $addWishlist.children('.wishlist_icon').html(response);
    }
  });
})