Gmail之星使用jQuery書籤書籤

我想創建一個使用jQuery書籤之類的明星。不幸的是，我所擁有的只是一種方式。這意味着，如果某個鏈接未加星標，那麼它會成功標記它，但如果某個鏈接已經加入了主題，並且我希望取消其星標，那麼星形圖像將從網頁中完全消失，但是在後端它可以正常工作，但是在星球的前端圖像完全消失。Gmail之星使用jQuery書籤書籤

我在我的HTML如下：

require_once('connection.inc.php'); 
$con = dbConnect('read'); 
$sql = "SELECT * FROM trn_bookmark"; 
$result = $con->query($sql) or die(mysqli_error()); 
while($row = $result->fetch_assoc()) { 
    $className = "star"; 
    if($row['bookmark_flag'] == 'Y'){ 
     $className = "favorited"; 
    } 
    echo '<div id="'.$row['bookmark_id'].'"><a href="javascript:void(0);" class="'.$className.'"></a> <span>'.$row['bookmark_desc'].'</span></div>'; 
}

CSS：

.star { 
background-color: transparent; 
background-image: url('star-off.png'); 
background-repeat:no-repeat; 
display: block; 
height:16px; 
width:16px; 
float:left; 
} 
.favorited { 
text-indent: -5000px; 
background-color: transparent; 
background-image: url('star-on.png'); 
background-repeat:no-repeat; 
height:16px; 
width:16px; 
float:left; 
}

JavaScript函數是這樣的：

$(document).ready(function(){ 
$('.star,.favorited').click(function() { 
     var id = $(this).parents('div').attr('id');    
     var className = $(this).attr('class'); 
     var flag = (className=='star') ? 'Y':'N'; 
     var $this = $(this); 
     $.ajax({ 
       type: "post", 
       url: "conversation.php", 
       cache: false,    
       data:{'bookmarkId': id,'flag':flag}, 
       success: function(response){ 
        if(response=='true'){        
         $this.toggleClass("favorited"); 
        } 
       }, 
       error: function(){      
        alert('Error while request..'); 
       } 
      }); 
    }); 
});

而且conversation.php：

$bookmarkId = $_POST['bookmarkId']; 
$flag = $_POST['flag']; 
require_once('connection.inc.php'); 
$con = dbConnect('read'); 
$stmt = $con->stmt_init(); 
$sql = "UPDATE trn_bookmark SET bookmark_flag = ? WHERE bookmark_id = '$bookmarkId'"; 
    if ($stmt->prepare($sql)) { 
     $stmt->bind_param('s', $flag); 
     $done = $stmt->execute(); 
    } 

    echo 'true';

我已經上傳了，所以你可以看到現場發生了什麼。你可以看到正在發生的事情在這裏點擊此鏈接：http://www.rytenet.com/starrating/index.php

來源

2013-04-20 Abhinav Srivastava

在OS X上的最新版Chrome上沒有任何問題。 – johankj 2013-04-20 18:45:16

使用Chrome的Windows 7上的Ditto同樣使用Chrome – djthoms 2013-04-20 18:46:24

@Josso：在主演之後和未登錄之前是否重新加載頁面？ OP：班級完全沒了。以及爲什麼'class =''。$ className。'「''之後的額外'''？ – 2013-04-20 18:49:09

試試這個

當頁面加載如果明星最愛的IT賣場的$ className =「最愛」不是的className =「明星收藏」

while($row = $result->fetch_assoc()) { 
    $className = "star"; 
    if($row['bookmark_flag'] == 'Y'){ 
     $className .= " favorited"; 
    } 
    echo '<div id="'.$row['bookmark_id'].'"><a href="javascript:void(0);" class="'.$className.'"></a> <span>'.$row['bookmark_desc'].'</span></div>'; 
}

來源

2013-04-21 06:09:10

謝謝泰米爾Selvan的幫助。現在它工作得很好。 – 2013-04-21 09:02:29

Gmail之星使用jQuery書籤書籤

回答

相關問題