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;
});

我的警报数据值正确无误。我有侧栏重新加载更新的值（只有第一次点击）。但我无法更改属性值，以便下次单击将发送切换值。

请帮忙！ THX

Answer 1

toggle_status方法中的

$(this)不是你的btn。在方法内部，this关键字引用方法所属的对象。在这种情况下Window。作为一种解决方法，我在方法之前创建了一个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;
});

Answer 2

您的location声明中还有一个额外的短划线。

$(this).attr()应该是：

$(this).attr('data--value','2');

在没有元素ID的Ajax成功之后切换数据值

2 个答案: