Question

我试图为项目建立一个喜欢/不喜欢的系统，而我在上一部分遇到了一些麻烦。

喜欢/不喜欢的系统正在运行，但我希望点击后自动更改按钮（更改类和图标）。

这是基于许多行的工作，每个行都是这样的（Like）：

<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat], 
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn-info 
pull-right btn-xs'><i class='fa fa-thumbs-up'></i></button>

在PHP中，我已经编写了代码，因此如果有喜欢或不喜欢，页面加载时显示的按钮是基于喜欢还是不喜欢。

按钮＆＃34;不喜欢＆＃34;是相同的，只更改按钮的类和：

的类

<button type='button' onClick='LikeDislike($row_data[id], $row_data[cat], 
$row_data[scat], $row_data[sscat], $_SESSION[user_id]);' class='btn btn-
danger pull-right btn-xs'><i class='fa fa-thumbs-down'></i></button>

我有这个代码设置喜欢/不喜欢，但我无法改变按钮的类和该特定按钮内的类：

    $.ajax({
    type:'POST',
    url:'inc/like.php',
    data:'id='+id+'&cat='+cat+'&scat='+scat+'&sscat='+sscat+'&uid='+uid,
    success:function(msg){
        if(msg == 'err'){
            /** alert('Some problem occured, please try again.'); **/
            $.toast({
                heading: 'Error!',
                text: 'There was a problem processing your like.',
                position: 'top-right',
                loaderBg: '#ff6849',
                icon: 'error',
                hideAfter: 3500
                });
        }else{
        $.toast({
        heading: 'Success!',
        text: msg,
        position: 'top-right',
        loaderBg: '#ff6849',
        icon: 'success',
        hideAfter: 3500,
    });
        if(msg == "Like added."){
            alert(1);
            //** Remove Class btn-info and add class of button to btn-danger.
            //* Change class of the <i> element to fa-thumbs-down (inside that button)
        }else{
            alert(2);
            //** Remove Class btn-danger and add class of button to btn-info.
            //* Change class of the <i> element to fa-thumbs-up (inside that button)
        }

        }
    }
});
}

所以，正如我在PHP中所做的那样，在一些喜欢/不喜欢之后，列表中的一些图标是不同的（有些是喜欢和其他不喜欢的）

请注意，该页面只应对该按钮有效，而不是对该页面的所有按钮都有效。

我无法轻松实现这一目标。有人可以帮帮我吗？感谢。

Answer 1

您可以使用LikeDislike关键字将按钮传递给您的this功能。

<button type='button' 
       onClick='LikeDislike(this, $row_data[id], $row_data[cat], $row_data[scat], $row_data[sscat], $_SESSION[user_id]);' 
       class='btn btn-info pull-right btn-xs'>
   <i class='fa fa-thumbs-up'></i>
</button>

之后，在处理ajax代码的地方，您可以执行以下操作：

function(ele, a, b, c, d) {
     $.ajax([...],
        success: function(){
           // Do whatever you like...

           ele.find('> i').removeClass('some-class').addClass('other-class');
        }
     );

}

Answer 2

我做到了，希望这是最好的方法。对于那些需要这些信息的人，我在这里留下了答案：

首先，我将按钮设置为ID，将类设置为另一个。按钮ID设置为1,2,3,4 ... 按钮内的元素设置为1_1,2_1,3_1 ..

然后，在if语句中（上面评论）：

            if(msg == "Like added."){
            document.getElementById(id).className = 'btn btn-danger pull-right btn-xs';
            document.getElementById(id+"_1").className = 'fa fa-thumbs-down';
        }else{
            document.getElementById(id).className = 'btn btn-info pull-right btn-xs';
            document.getElementById(id+"_1").className = 'fa fa-thumbs-up';
        }

javascript更改该按钮和其他元素的类

2 个答案: