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 {{1是一样的。

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!');
            }
        }
    );
});

Answer 2

你的代码在ajax中有问题。意味着你必须在调用ajax之前定义click对象，如下所示。

var click_obj = '';

$('.glyphicon').click(function(){


click_obj = $(this);


//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, click_obj, act);


        } else {
            alert('Error occurred...Please try again!');
        }
     }
   );
});

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

2 个答案: