ajax - 仅更改活动 div 而不是所有具有相同名称的类

Question

当我按下其中一个按钮时，我有一组带有按钮的类。变化发生在所有班级。但我希望它只在活动 div 上。

我知道我应该使用 $this。但我无法管理它。有任何想法吗 ？

function close(){
      $('.close').click(function() {
        $.ajax({
            url: "php/functions.php",
            type: "POST",
            data: "php",
            success: function(html) {
               var note =  $(".note").html(html);
            }

        });

 return false;
});
}

php 文件只包含一个回声

<?php echo "Heloo" ?>

html

<div class="note">
<div class="close"></div>
</div>
<div class="note">
<div class="close"></div>
</div>

Answer 1

你要的是这个——

$('.close').click(function() {
  var $this = $(this);
  $.ajax({
    url: "php/functions.php",
    type: "POST",
    data: "php",
    success: function(html) {
        $this.closest(".note").html(html);
        //or
        $this.parent().html(html);
        //or
        $this.parent().html(html);
    }
  });
});

但是，这将覆盖您关闭的 div。如果你想保持你关闭的 div -

HTML：

<div class="notewrap">
  <div class="note"></div>
  <div class="close"></div>
</div>
<div class="notewrap">
  <div class="note"></div>
  <div class="close"></div>
</div>

Javascript（仅使用回调中提供的选项之一）：

$('.close').click(function() {
  var $this = $(this);
  $.ajax({
    url: "php/functions.php",
    type: "POST",
    data: "php",
    success: function(html) {
        //Option 1 - will work even if you change the html structure a fair bit
        $this.parents(".notewrap").find(".note").html(html);
        //Option 2 - will only work if your structure remains very similar
        $this.siblings(".note").html(html);
        //Option 3
        $this.parent().find(".note").html(html);
    }
  });
});

Answer 2

$('.close').click(function() {
     $(this).addClass("SOMETHING"); <--- like this
        $.ajax({
            url: "php/functions.php",
            type: "POST",
            data: "php",
            success: function(html) {
               var note =  $(".note").html(html);
            }

        });

Answer 3

如果我正确理解您的问题，您是否只是想更改在 ajaxsuccess回调中单击的按钮？这在回调中不起作用，因为它不会返回按钮（我认为它返回窗口。不确定）。
您必须在 ajax 发布之前获得对按钮的引用。尝试这个：

$('.close').click(function() {
    var self = $(this);
    $.ajax({
        url: "php/functions.php",
        type: "POST",
        data: "php",
        success: function(html) {
            //Now you can do whatever you want with 'self', which is the button that was clicked
            self.addClass('myclasstoadd');
            var note =  $(".note").html(html);
        }
    });