Question

我想在一个类中定位一些div，我会使用$（this），但这并不起作用，因为我从另一个函数调用该类。

示例代码。

$(document).on('click', '.Player', function(e){
    var id = $(this).find('.Song_Id').html();
    $.ajax({
    type:"POST",
    data: {data:id},
    complete: function(){
    $(this).attr('src', '../images/appicons/2/16x16/refresh - Red.png') 
    },
    url:"php/player/get_song.php"
    }).done(function(f){
        $('#Song_info').html(f)
    });
})

从上面，以下是我不知道如何表达的界限。

$(this).attr('src', '../images/appicons/2/16x16/refresh - Red.png'),

它假设目标类为“.player”，但不是整个类，只是被点击的元素。

感谢。

Answer 1

您可以将$(this)存储在另一个变量中，并在您的函数中使用此变量。

$(document).on('click', '.Player', function (e) {
    var id = $(this).find('.Song_Id').html(),
        that = $(this);
    $.ajax({
        type: "POST",
        data: {
            data: id
        },
        complete: function () {
            that.attr('src', '../images/appicons/2/16x16/refresh - Red.png')
        },
        url: "php/player/get_song.php"
    }).done(function (f) {
        $('#Song_info').html(f)
    });
})

Answer 2

执行ajax回调时，默认情况下，回调方法的执行上下文设置为ajax设置对象。

您可以使用$.ajax()的上下文选项来传递自定义执行上下文

$(document).on('click', '.Player', function (e) {
    var id = $(this).find('.Song_Id').html();
    $.ajax({
        type: "POST",
        data: {
            data: id
        },
        //use context to set the execution context of the callback
        context: this,
        complete: function () {
            $(this).attr('src', '../images/appicons/2/16x16/refresh - Red.png')
        },
        url: "php/player/get_song.php"
    }).done(function (f) {
        $('#Song_info').html(f)
    });
})

context:

此对象将成为所有与Ajax相关的回调的上下文。通过默认情况下，上下文是表示ajax设置的对象在调用中使用（$ .ajaxSettings与传递给的设置合并 $阿贾克斯）。例如，将DOM元素指定为上下文将将其作为请求完整回调的上下文

如何定位在ajax中的类中被单击的元素

2 个答案: