2017-02-03 68 views
2

有沒有人有想法我在這裏做錯了什麼?在console.log中它返回750或2000,但在我的情況下似乎沒有找到圖標並添加圖標類。jQuery這個發現選擇器不工作

JS

$("a.image-select").click(function(){ 

    $('.loading').show(); 
    selectedImage = $(this).data('image'); 
    $("a.image-select").removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.image-warning').hide(); 
    $(".image-original").attr('src', "imgd.php?src="+selectedImage+"&quality=100&w=500&h=500&cf"); 
    $(".image-optimised").attr('src', "imgd.php?src="+selectedImage+"&quality=100&w=500&h=500&cf"); 

    $.ajax({ 
     url: "imgd.php?src="+selectedImage+"&quality=100&json", 
     dataType: "json" 
    }).success(function(data){ 
     $('.image-details-quality').html('100'); 
     var sizeInMB = (JSON.stringify(data['size'])/(1024*1024)).toFixed(2); 
     var sizeInKB = (JSON.stringify(data['size'])/1024).toFixed(2); 
     $('.image-details-size').html(sizeInMB + 'mb' + '/' + sizeInKB + 'kb'); 
     $('.image-details-dims').html(data['width'] + 'px' + ' x ' + data['height'] + 'px'); 
     $('.image-details-type').html(data['mimeType']); 
     // if image is more than 2000 show error 
     if(data['width'] > 2000){ 
      $('.image-warning').show(); 
     } 
     // set thumbnail icons 
     if(data['width'] == 2000){ 
      $(this).find('span.device-icon').addClass('glyphicon-phone'); 
     } else if(data['width'] == 750) { 
      $(this).find('span.device-icon').addClass('glyphicon-blackboard'); 
     } 
     console.log(data['width']); 
     $('#slider').slider('refresh'); 
     $('.image-details').show(); 
     $('.loading').hide(); 
    }); 

}); 

這部分問題

// set thumbnail icons 
if(data['width'] == 2000){ 
    $(this).find('span.device-icon').addClass('glyphicon-phone'); 
} else if(data['width'] == 750) { 
    $(this).find('span.device-icon').addClass('glyphicon-blackboard'); 
} 

HTML實例

<a href="#" data-image="LUXE-ESSENTIALS-MOB.jpg" class="image-select selected"> 
    <span class="select-icon glyphicon glyphicon-ok-circle"></span> 
     <img src="imgd.php?src=LUXE-ESSENTIALS-MOB.jpg&amp;quality=100&amp;width=80&amp;height=80&amp;crop-to-fit" data-pin-nopin="true"> 
    <span class="device-icon glyphicon"></span> 
</a> 
+0

在回調中,這指的是Ajax調用的jqXHR對象,而不是事件處理程序綁定到的元素http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not工作 –

回答

7

$(this)成功回調裏面沒有更多的指的是點擊的元素,所以你應該將其保存在變量中,然後在回調中使用它,如:

var _this = $(this); 

$.ajax({ 
    url: "imgd.php?src="+selectedImage+"&quality=100&json", 
    dataType: "json" 
}).success(function(data){ 
    ... 
    // set thumbnail icons 
    if(data['width'] == 2000){ 
     _this.find('span.device-icon').addClass('glyphicon-phone'); 
    } else if(data['width'] == 750) { 
     _this.find('span.device-icon').addClass('glyphicon-blackboard'); 
    } 
    ... 
}); 

或者你也可以使用上下文屬性,如:

$.ajax({ 
    context: this, 
    url: "imgd.php?src="+selectedImage+"&quality=100&json", 
    dataType: "json" 
    success: function(response){ 
     //You can use $(this) now 
    } 
}); 

希望這有助於。

+0

'這'是正確的答案,對於雙關抱歉:) – G0dsquad

+0

不要忘記你也可以聲明回調的上下文。 – scrappedcola

+0

是的,也可以@scrappedcola。 –