jQuery的父级选择

Question

当他们单击选择框时，我试图更改选择框的背景颜色，但找不到问题所在。我以为会是这样

$(this.parent).css('background','#fff');

     $('select.flag').change(function(){
    
    	var callid = $(this).data('callid');
    	var flag = $(this).val();
    
           $.ajax({
               url: "/calls/update/flag",
               type: "POST",
               data: {flag: flag, callid : callid},
               success: function(result) {
    
                $(this.parent).css('background','#fff');
    
               },
               error: function() {
    
                   alert("Error. Please try again.");
               }
           });
    });
  

    <div class="pure-g">
     <div class="pure-u-1-4">
      <select data-callid="2" class="flag" style="">
       <option value="flag">Flag</option>
      </select>
     </div>
    </div>

Answer 1

问题在于this的值在成功回调中发生变化，并且不再是事件起源的元素。有几种方法可以解决此问题。

设置上下文

提供 context 选项可让您向jQuery指定this在回调中应该是什么。

$.ajax({
  url: "/calls/update/flag",
  type: "POST",
  data: {
    flag: flag,
    callid: callid
  },
  context: this,
  success: function(result) {
    $(this).parent().css('background', '#fff');
  },
  error: function() {
    alert("Error. Please try again.");
  }
});

使用变量

您还可以创建自己的变量以将其存储在不变的位置。

var that = this;

$.ajax({
  url: "/calls/update/flag",
  type: "POST",
  data: {
    flag: flag,
    callid: callid
  },
  success: function(result) {
    $(that).parent().css('background', '#fff');
  },
  error: function() {
    alert("Error. Please try again.");
  }
});

使用现有事件

该事件已经具有对该元素的引用，因此您不必创建自己的变量。

$('select.flag').change(function(e){
  $.ajax({
    url: "/calls/update/flag",
    type: "POST",
    data: {
      flag: flag,
      callid: callid
    },
    success: function(result) {
      $(e.target).parent().css('background', '#fff');
    },
    error: function() {
      alert("Error. Please try again.");
    }
  });
});