javascript - 无法设置作为参数传递的元素属性

Question

我有以下代码(阅读注释和代码):

<!-- Panel -->
<div class="panel panel-default" num="1">
<!-- There was some boring stuffs -->
<div style='float: right;'>
    <!-- Three buttons: hearth, tic and cross -->
    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true" style="margin-right: 5px;" act="1"></span>
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true" style="margin-right: 5px;" act="3"></span>
    <span class="glyphicon glyphicon-ok" aria-hidden="true" style="margin-right: 5px;" act="0"></span>
</div>
<!-- Other boring stuffs -->
<script>
$('.glyphicon').click(function(){
    //Panel father of the button clicked
    panel = $(this).closest('div.panel');
    //Action: 1 like, 2 dislike, 3 signal, 0 accept
    act = $(this).attr('act');
    //Send request to the file that change it in the database. Ignore this until the change() function call
    $.post(
        'action.php',
        {id : panel.attr('num'), act : act},
        function(data) {
            if (data == '1') {
                //If the request is correct change DOM elements
                //First is the father panel, second the button clicked (this is the problematic argument), and the action (1, 2, 3, 0)
                change(panel, $(this), act);
            } else {
                alert('Error occurred...Please try again!');
            }
        }
    );
});
//Change DOM elements
function change(panel, obj, act) {
    //Switch the action
    switch(parseInt(act)) {
        case 1:
            //This code is executed but those three action doesn't work. Nothing change. I think the problem is the var obj
            obj.removeClass('glyphicon-heart-empty');
            obj.addClass('glyphicon-heart');
            obj.attr('act', '2');
            break;
        case 2:
            //Same thing here, but I haven't checked this because first the code of case 1 need to work.
            obj.removeClass('glyphicon-heart');
            obj.addClass('glyphicon-heart-empty');
            obj.attr('act', '1');
            break;
        case 3:
            //The panel var works very well and those blocks works
            panel.removeClass('panel-default');
            panel.addClass('panel-warning');
            break;
        default:
            panel.removeClass('panel-warning');
            panel.addClass('panel-default');
    }
}
</script>

我希望当我单击壁炉时它会填满，如果我再次单击它会返回空。问题是当我尝试设置单击的炉床的 obj 元素的元素属性时。我确信代码已执行，因为我在情况 1 和 2 中添加了 console.log() 对其进行了调试。它不会返回错误，并且代码似乎可以工作，但什么也没有发生再次单击 attr act 是相同的。

Answer 1

在 $.post 成功回调中，this 不再是您单击的元素(这是您需要传递给 change)。您需要在 $.post 回调之外保存对所述元素的引用，并在调用change时将其用作参数，例如:

$('.glyphicon').click(function(){
    var icon = $(this),
       panel = icon.closest('div.panel'),
         act = icon.attr('act');

    $.post(
        'action.php',
        {id : panel.attr('num'), act : act},
        function(data) {
            if (data == '1') {
                change(panel, icon, act);
            } else {
                alert('Error occurred...Please try again!');
            }
        }
    );
});