點擊按鈕後，保存到MySQL，然後顯示CSS突出顯示

我有一個評級功能，如下所示：一旦用戶點擊+1按鈕，等級提高1，並保存到MySQL。我想要它做的事情是一旦點擊，它將的背景改爲不同的顏色，如下圖所示。點擊按鈕後，保存到MySQL，然後顯示CSS突出顯示

（我希望它做的是「一次點擊」）目前它只是更新了背景爲白色的數字）

注意：我只是要求您提供建議或某種方式來引導我朝着正確的方向前進，謝謝您。

沒有被點擊：

enter image description here

一旦點擊：

enter image description here

PHP/html表單：提交+1

<div class="up vote" name="voteUp" id="<?php echo $post_iD;?>"> 
    <div class="wrapper">+<?php echo $VoteRate;?></div> 
</div>

AJAX：更新按鈕

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

     if (name=='voteUp') 
     { 
      $.ajax(
      { 
       type: "POST", 
       url: "voting/up_vote.php", 
       data: dataString, 
       cache: false, 
       success: function(html) 
       { 
        parent.html(html); 
       } 
      }); 
     } 
     return false; 
    }); 
});

up_vote.php：從阿賈克斯

$ip = $_SERVER['REMOTE_ADDR']; 
if($_POST['id']) 
{ 
    $sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip"); 
    $sth->execute(array(':id' => $_POST['id'], ':ip' => $ip)); 

    if($sth->fetchColumn() == 0) 
    { 
      $sth = $db->prepare("UPDATE posts set voteUp = voteUp+1 where post_iD = :id"); 
      $sth->execute(array(':id' => $_POST['id'])); 

      $sth = $db->prepare("INSERT into PostsRating (post_iD_fk, add_iP) VALUES (:id, :ip)"); 
      $sth->execute(array(':id' => $_POST['id'], ':ip' => $ip)); 
    } else { 
      $sth = $db->prepare("UPDATE posts set voteUp = voteUp-1 where post_iD = :id"); 
      $sth->execute(array(':id' => $_POST['id'])); 

      $sth = $db->prepare("DELETE FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip"); 
      $sth->execute(array(':id' => $_POST['id'], ':ip' => $ip)); 
    } 

    $sth = $db->prepare("SELECT voteUp FROM posts WHERE post_iD = :id"); 
    $sth->execute(array(':id' => $_POST['id'])); 

    $row = $sth->fetch(); 

    echo $row['voteUp']; 
}

來源

2013-07-03 iBrazilian

您*可能*要小心將該元素的ID設置爲數字值。不確定其含義，但是您不使用'id'作爲它的用途。相反，對於jQuery可以讀取數據值的情況，您可以使用'data-id =「123」'。這就是說，你的問題是什麼？ –

@RobW，謝謝你的回答，我會把這個贓物帶進去。我用這個問題的粗體文本更新了這篇文章。 – iBrazilian

添加了答案，這應該有所幫助。你只需要添加一個新的CSS類，然後根據需要應用該類。可能還有其他方法可以做到這一點，但這是最基本的。 –

在你的成功回調，爲什麼不設置一個類爲parent，然後更新.wrapper提交？

success: function(html) 
{ 
    parent.addClass("blue"); 
    parent.find(".wrapper").html("+ " + html); 
}

當用戶刷新頁面，並要繼續顯示藍色，你會簡單地說：

<?php 
$ip = $_SERVER['REMOTE_ADDR']; 
$sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip"); 
$sth->execute(array(':id' => $post_iD, ':ip' => $ip)); 
$class = ($sth->fetchColumn()) ? " blue" : ""; 
?> 
<div class="up vote<?php echo $class; ?>" name="voteUp" id="<?php echo $post_iD;?>"> 
    <div class="wrapper">+<?php echo $VoteRate;?></div> 
</div>

來源

2013-07-03 20:32:15

你對50％是正確的，唯一的問題是，一旦頁面刷新，藍色類消失，白色背景返回。這主要是我的問題，雖然我喜歡這種方法，但是如何保存一次點擊的藍色類。 – iBrazilian

在頁面刷新上，您需要在呈現初始按鈕之前檢測用戶投票。 –

增加了另外50％給我的答案。 –

首先，你不能有一個類名，在它的空間 - 它將被解釋爲兩個類別，up和vote。

在你可以回聲沿東西線的PHP（一定要的dataType設置爲JSON）

echo(json_encode(array("success"=>true))); 
exit();

在這之後jQuery的可以處理響應：

function(result) { 
    var result_string = jQuery.parseJSON(result); 
    if(result_string.success) { 
     $(this).children(".wrapper").css("background-color", "blue") 
    } 
}

來源

2013-07-03 20:36:20

你可以有多個類每個元素，但只有一個ID ... –

我可能是錯的，但它似乎OP要它被解釋爲一個類 –

啊，沒關係他/她確實使用它們作爲單獨的類 –

您可以更改使用.css（「background-color」，「blue」）添加顏色的成功函數，或者如果您希望使其始終爲藍色（如果vote_counter高於您可以將其添加到代碼頂部）：

if (parseInt($("#"+id).children(".wrapper").text()) >= 1) { 
$("#"+id).children(".wrapper").css("background-color","blue"); 
}

來源

2013-07-03 20:40:25 Wikunia

點擊按鈕後，保存到MySQL，然後顯示CSS突出顯示

回答

相關問題