在没有json的ajax中使用唯一ID

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 函数会更改上下文，因此成功函数中的“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 与 .click 处理程序上下文中的 this 不同。当您执行回调时，this 是您的浏览器窗口，而不是最初点击的元素。

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