Question

ajax请求的功能位于：

success: function(data) {
   $('#totalvotes1').text(data); 
}

以及<span id="totalvotes1">，

但我需要它与独特的ID一起使用，其中：

success: function(data) { 
    $('#total_' + $(this).attr("id")). text(data); 
}

以及<span id="total_vote_up_<?php echo $mes_id; ?>">

和<a id="vote_up_<?php echo $mes_id1; ?>">

我无法弄清楚以下代码有什么问题。如果有人用json轻松修复我会尝试但我不知道json是如何工作的。如果有人可以帮我调试这段代码，我会很高兴

general.js：

$(".vote").click(function() 
{
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var eData = $(this).attr("data-options");
    var dataString = 'id='+ id + '&' + eData ;
    var parent = $(this);

    if(name=='up')
    {
        $(this).fadeIn(200).html('');
        $.ajax({
            type: "POST",
            url: "up.php",
            data: dataString,
            cache: false,

            success: function(data) { 
                $('#total_' + $(this).attr("id")).text(data); 
            }
        });
    }

});
});
});

的index.php

<div id="main">
<div id="left">
    vote_up_<?php echo $mes_id1; ?>
<span class='up'><a id="vote_up_<?php echo $mes_id1; ?>" class="vote" name="up" data-options="key1=<?php echo $mes_id1;?>&key2=<?php echo $mes_id2;?>&key3=<?php echo $totalvotes1;?>&key4=<?php echo $totalvotes2;?>"> <img src="up.png" alt="Down" /></a></span><br />
<span id="total_vote_up_<?php echo $mes_id1; ?>"><?php echo $totalvotes1; ?></span><br />
</div>
<div id="message">
    <?php echo $message1; ?>
</div>
<div class="clearfix"></div>
 </div>

Answer 1

认同和进入是你的朋友。

尝试做这样的事情：

// Before $.ajax
var that = this;
// Inside success
$('#total_' + $(that).attr("id")).text(data);

大多数jQuery函数都会更改上下文，因此success函数中的“this”不会指向“.vote”元素。你必须保存对元素的引用（通常用“var that = this”之类的东西）并在成功函数中使用这个引用。

编辑：

正如Matt Burland指出的那样，你已经保存了点击的元素引用（父级）并且保存了id，所以这可以通过以下方式解决：

$('#total_' + id).text(data);

Answer 2

$(".vote").click(function() 
{

var id = $(this).attr("id");
var name = $(this).attr("name");
var eData = $(this).attr("data-options");
var dataString = 'id='+ id + '&' + eData ;
var parent = $(this);


if(name=='up')
{

$(this).fadeIn(200).html('');
$.ajax({
type: "POST",
url: "up.php",
data: dataString,
cache: false,

success: function(data) { $('#total_'+id).text(data); } // here is the change

});

}

});
});
});

Answer 3

清理并修复。请注意，您可以执行一次，将其存储在变量中并再次使用，而不是继续执行$(this)。这样效率更高，因为它避免了重复创建jQuery对象的开销（这是$(...)所做的）。

$(".vote").click(function() 
{
    var parent = $(this);   //Note: calling this parent is really confusing!
    var id = parent.attr("id");
    var name = parent.attr("name");
    var eData = parent.data("options");
    var dataString = 'id='+ id + '&' + eData ;

    if(name=='up')
    {

        parent.fadeIn(200).html('');
        $.ajax({
            type: "POST",
            url: "up.php",
            data: dataString,
            cache: false,

            success: function(data) { $('#total_' + id).text(data); }

        });

    }

});

注意：原始文件不起作用的原因是AJAX回调上下文中的this与this处理程序的上下文中的.click不同。执行回调时，this是您的浏览器窗口，而不是最初点击的元素。

那么，这是如何解决的呢？它利用了封闭物。如果你有一个函数（就像你的AJAX回调）嵌套在另一个函数中，内部函数可以访问外部函数中定义的所有变量。因此，通过在id变量中缓存id，可以在调用AJAX回调时访问它。更好的是，即使您在调用原始点击的回调之前点击另一个.vote，它仍然会记住正确的值！

在没有json的情况下在ajax中使用唯一id

3 个答案: