jQuery/PHP类似/不同按钮

我正在尝试创建一个简单的“喜欢/不喜欢”按钮来更新数据库。jQuery代码位于外部文件中。PHP变量从Codeigniter中的控制器发送

当页面加载fresh时，它会正确显示当前登录的用户是否喜欢或不喜欢他们正在查看的用户。如果他们单击一次，一切都会正常工作-按钮在“喜欢/不喜欢”之间切换，喜欢的数量会增加或减少，数据库也会更新。第二次单击时，它会重新加载整个页面，但不会更新数据库-如何停止刷新并在不重新加载页面的情况下使其更新

PHP：

<div id="like_button">

<p><a href=""><span id="like_unlike" class="link"><?php if($already_liked){echo "Unlike";}else{echo"Like";}?></span></a> (<span id="number_of_likes"><?php echo $number_of_likes; ?></span>)</p>

<span id="liked_unliked_user_id" style="display:none"><?php echo $liked_unliked_user_id; ?></span>
<span id="liking_unliking_user_id" style="display:none"><?php echo $liking_unliking_user_id; ?></span>

</div>

（）

jQuery：

$( function() {

$( '#like_button a' ).click( function( e ) {

  var thisrecord = $( this ).closest( "div" );

  var liking_unliking_user_id = parseInt( thisrecord.find( "span#liking_unliking_user_id" ).html() );
  var liked_unliked_user_id = parseInt( thisrecord.find( "span#liked_unliked_user_id" ).html() );
  var like_unlike = thisrecord.find( "#like_unlike" ).html();


  if (like_unlike == 'Like') 
  {
    $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Unlike</span></a>' );
    var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) + 1;
    thisrecord.find( "span#number_of_likes" ).html( likes );
    $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
  }
  else
  {
    $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Like</span></a>' );
    var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) - 1;
    thisrecord.find( "span#number_of_likes" ).html( likes );
    $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
  }

  e.preventDefault();
});
});

$（函数（）{
$（“#类似于按钮a”）。单击（函数（e）{
var thisrecord=$（this）.closest（“div”）；
var liking_unliking_user_id=parseInt（thisrecord.find（“span#liking_unliking_user_id”）.html（））；
var liked_unliked_user_id=parseInt（thisrecord.find（“span#liked_unliked_user_id”）.html（））；
var like_inspect=thisrecord.find（“#like_inspect”）.html（）；
if（like_inspect=='like'）
{
$（此）。替换为（“”）；
var likes=parseInt（thisrecord.find（“span#number_of_likes”）.html（））+1；
thisrecord.find（“span#number_of_likes”）.html（likes）；
$.post（基本url+“/controller/function/”+喜欢的用户id+“/”+喜欢的用户id）；
}
其他的
{
$（此）。替换为（“”）；
var likes=parseInt（thisrecord.find（“span#number_of_likes”）.html（））-1；
thisrecord.find（“span#number_of_likes”）.html（likes）；
$.post（基本url+“/controller/function/”+喜欢的用户id+“/”+喜欢的用户id）；
}
e、 预防默认值（）；
});
});

当您第一次创建

事件时，单击（）

事件，jQuery选择器会找到所有

“#like_button a”

元素并将此事件附加到它们。使用

$替换
#like_按钮a
元素时（this）。替换为（…）

此新元素未附加

。单击（）

事件，因为原始选择器仅运行一次以附加事件（此时此元素不存在）

在您的代码中，页面会重新加载，因为您正在单击一个链接，该链接只会链接回当前页面，

.click（）

函数使用

e.preventDefault（）

阻止该事件

如果命名函数，然后重新连接

。在替换对象后单击（）

事件，则该函数应能正常工作：

$( function() {
    function toggleLike(e)
    {
        var thisrecord = $( this ).closest( "div" );

        var liking_unliking_user_id = parseInt( thisrecord.find( "span#liking_unliking_user_id" ).html() );
        var liked_unliked_user_id = parseInt( thisrecord.find( "span#liked_unliked_user_id" ).html() );
        var like_unlike = thisrecord.find( "#like_unlike" ).html();


        if (like_unlike == 'Like') 
        {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Unlike</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) + 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        } else {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Like</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) - 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        }

        e.preventDefault();
    }

    $( '#like_button a' ).click(toggleLike);
});

$（函数（）{
函数切换式（e）
{
var thisrecord=$（this）.closest（“div”）；
var liking_unliking_user_id=parseInt（thisrecord.find（“span#liking_unliking_user_id”）.html（））；
var liked_unliked_user_id=parseInt（thisrecord.find（“span#liked_unliked_user_id”）.html（））；
var like_inspect=thisrecord.find（“#like_inspect”）.html（）；
if（like_inspect=='like'）
{
$（此）。替换为（“”）；
var likes=parseInt（thisrecord.find（“span#number_of_likes”）.html（））+1；
thisrecord.find（“span#number_of_likes”）.html（likes）；
$（“#类似按钮a”）。单击（类似切换）；/**frakenstein teh.click（）事件
$.post（基本url+“/controller/function/”+喜欢的用户id+“/”+喜欢的用户id）；
}否则{
$（此）。替换为（“”）；
var likes=parseInt（thisrecord.find（“span#number_of_likes”）.html（））-1；
thisrecord.find（“span#number_of_likes”）.html（likes）；
$（“#类似按钮a”）。单击（类似切换）；/**frakenstein teh.click（）事件
$.post（基本url+“/controller/function/”+喜欢的用户id+“/”+喜欢的用户id）；
}
e、 预防默认值（）；
}
$（'like#u button a'）。单击（toggleLike）；
});

当您第一次创建

事件时，单击（）

事件，jQuery选择器会找到所有

“#like_button a”

元素并将此事件附加到它们。使用

$替换
#like_按钮a
元素时（this）。替换为（…）

此新元素未附加

。单击（）

事件，因为原始选择器仅运行一次以附加事件（此时此元素不存在）

在您的代码中，页面会重新加载，因为您正在单击一个链接，该链接只会链接回当前页面，

.click（）

函数使用

e.preventDefault（）

阻止该事件

如果命名函数，然后重新连接

。在替换对象后单击（）

事件，则该函数应能正常工作：

$( function() {
    function toggleLike(e)
    {
        var thisrecord = $( this ).closest( "div" );

        var liking_unliking_user_id = parseInt( thisrecord.find( "span#liking_unliking_user_id" ).html() );
        var liked_unliked_user_id = parseInt( thisrecord.find( "span#liked_unliked_user_id" ).html() );
        var like_unlike = thisrecord.find( "#like_unlike" ).html();


        if (like_unlike == 'Like') 
        {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Unlike</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) + 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        } else {
            $( this ).replaceWith( '<a href=""><span id="like_unlike" class="link">Like</span></a>' );
            var likes = parseInt( thisrecord.find( "span#number_of_likes" ).html() ) - 1;
            thisrecord.find( "span#number_of_likes" ).html( likes );
            $( '#like_button a' ).click(toggleLike); // **frakenstein teh .click() event
            $.post( base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id );
        }

        e.preventDefault();
    }

    $( '#like_button a' ).click(toggleLike);
});

$（函数（）{
函数切换式（e）
{
var thisrecord=$（this）.closest（“div”）；
var liking_unliking_user_id=parseInt（thisrecord.find（“span#liking_unliking_user_id”）.html（））；
var liked_unliked_user_id=parseInt（thisrecord.find（“span#liked_unliked_user_id”）.html（））；
var like_inspect=thisrecord.find（“#like_inspect”）.html（）；
if（like_inspect=='like'）
{
$（此）。替换为（“”）；
var likes=parseInt（thisrecord.find（“span#number_of_likes”）.html（））+1；
thisrecord.find（“span#number_of_likes”）.html（likes）；
$（“#类似按钮a”）。单击（类似切换）；/**frakenstein teh.click（）事件
$.post（基本url+“/controller/function/”+喜欢的用户id+“/”+喜欢的用户id）；
}否则{
$（此）。替换为（“”）；
var likes=parseInt（thisrecord.find（“span#number_of_likes”）.html（））-1；
thisrecord.find（“span#number_of_likes”）.html（likes）；
$（“#类似按钮a”）。单击（类似切换）；/**frakenstein teh.click（）事件
$.post（基本url+“/controller/function/”+喜欢的用户id+“/”