jQuery / Ajax变量混淆

Can you you tell me what would be the difference between of the ID:

    var id = $(this).attr("name");
    var id = 1;

The problem is that when I'm using the first variable example DOESN'T WORK

        $.ajax({
            type: "POST",
            url: "http://localhost/",
            data: dataString,
            cache: false,

            success: function(rating) {
                $("span#rating-" + id).html(rating);
            }
        });

AND with the second example it WORKS fine.

OK, that would be the full function code:

$(function() {

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

    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var dataString = 'id='+ id ;
    var parent = $(this);

    // var id = 1;

    if (name=='up') {

        $.ajax({
            type: "POST",
            url: "vote.php?type=up",
            data: dataString,
            cache: false,

            success: function(rating) {
                $('span#rating-' + id).html(rating);
            }
        });
    }
    else {

        $.ajax({
            type: "POST",
            url: "vote.php?type=down",
            data: dataString,
            cache: false,

            success: function(rating) {
                $('span#rating-' + id).html(rating);
            }
        });
    }

    return false;
});
});

My guess would be that the name attribute of the element you're checking is not 1, but it's hard to tell without the markup in question.

Need more information but the obvious explanation is that this is not defined (or not defined with what you think) at the time you initialize id. Either that or the name attribute isn't what you expect.

If it doesn't work it means the function isn't running int the right context and $(this) doesn't do what you think because this has a different meaning.

Indeed, looking harder at the code, I don't see how this could possibly be in the scope of any DOM element at all. The callback function probably runs in the context of the JQuery object or something like that.

Within your question you have stated:

var id = $(this).attr("name");
var id = 1;

However in your full code you are using:

var id = $(this).attr("id");
var name = $(this).attr("name");

The full code "should" work, as you don't have your id and name attributes mixed up.

If it is not working it is likely that the .vote element you are using does not have an id. From the looks of the code, perhaps you actually desire the id of the .vote elements parent? However no way to tell without providing extra markup.

To get the .vote elements parent id it would be:

var $vote = $(this);
var $parent = $vote.parent();
var id = $parent.attr("id");
var name = $vote.attr("name");
var dataString = 'id='+ id ;

Notice how I also do not keep using $(this) and rather store the returned object in a variable. This is much quicker as we do not have to keep having to let jQuery find the element again.

Another reason it may not work is if you do actually want the id of your vote buttons. Then it would not work simply because ids may not be duplicated. For example you would have to rename the id between the two vote buttons to something like "vote-up-1" and "vote-down-1". Or rather just stick the id inside the "title" attribute and use that for the post's id rather than the id attribute.

Hope that helps.