javascript - Ajax 成功后切换数据值，无需元素 ID

Question

我有多个按钮来切换不同项目的状态:

<div class="btn-group btn-toggle project_status" data-project-id="1" data-form="project_status" data-value="1"> 
  <button class="btn btn-default active">ACTIVE</button>
  <button class="btn btn-primary">CLOSED</button>
</div>
<div class="btn-group btn-toggle project_status" data-project-id="2" data-form="project_status" data-value="1"> 
  <button class="btn btn-default active">ACTIVE</button>
  <button class="btn btn-primary">CLOSED</button>
</div>

当ajax发布成功时，我需要在1和2之间切换数据值。

到目前为止我已经尝试过，但没有任何运气:

$('.project_status').click(function(){
    var project_id = $(this).attr('data-project-id');
    var project_status_val = $(this).attr('data-value');
    var toggle_status = function(){
        $(this).find('.btn').toggleClass('active').toggleClass('btn-primary');
        if (project_status_val == '1'){
            alert(project_status_val);
            $(this).attr('data-value','2');
        } else {
            alert(project_status_val);
            $(this).attr('data-value','1');
        }
        return false;
    };
    var dataString = 'project_id=' + project_id + '&project_status=' + project_status_val;
    $.ajax({
        type: "POST",
        url: "post.php",
        data: dataString,
        success: toggle_status
    });
    $('#sidebar-wrapper').load('sidebar.php');
    return false;
});

我的警报数据值正确。我已经用更新的值重新加载了侧边栏(仅第一次单击)。但我无法更改属性值，以便下次单击将发送切换后的值。

请帮忙!谢谢

Answer 1

toggle_status 方法中的

$(this) 不是您的 btn。在方法内部，this 关键字引用该方法所属的对象。在本例中窗口。作为解决方法，我在方法之前创建了一个 self 属性来存储对所选 $('.project_status') 对象的引用。我已经更新了代码，因此它可以工作。

https://jsfiddle.net/05akxvx3/1/

$('.project_status').click(function(){
  var self = $(this);
  var project_id = self.attr('data-project-id');
  var project_status_val = self.attr('data-value');
  var toggle_status = function(){
    self.find('.btn').toggleClass('active').toggleClass('btn-primary');
    if (project_status_val == '1'){
        self.attr('data-value','2');
    } else {
        self.attr('data-value','1');
    }
    alert(self.attr('data-value'));
    return false;
  };
  var dataString = 'project_id=' + project_id + '&project_status=' + project_status_val;
  $.ajax({
    type: "POST",
    url: "post.php",
    data: dataString,
    success: toggle_status
  });
  $('#sidebar-wrapper').load('sidebar.php');
  return false;
});