0

我希望能够为任何给定的对话加注星标/取消加注星标（例如 Gmail。）当我单击“空”星标将某些内容标记为重要时，我需要提交一些 ajax，然后切换到星标图像。反之亦然，当我单击加星标的对话时，我需要 ajax 提交并在其成功后，然后将“空”星切换回来。

一些 HTML（简而言之）：

 <div class='__conversation'>
      <div class='__conversation_star'>
         <img class='__star_n' src='p_star_n.png'/>
         <img class='__star_y' src='p_star_y.png'/>
      </div>
 </div>

和基本功能类似的东西：

    $(".__conversation_star").click(function() {
         $(this).find('img').toggle();
    });

一些阿贾克斯：

 $(".__conversation_star").click(function() {
    jQuery.ajax({
        type: 'POST',
        url: "./process.conversation.php,
        data: {method: 'star'},
        cache: true,
        success: function() {
            // Toggle to un-starred .__star_n
        }
    });
 });

 $(".__conversation_star").click(function() {
    jQuery.ajax({
        type: 'POST',
        url: "./process.conversation.php",
        data: {method: 'star'},
        cache: true,
        success: function() {
            // Toggle to starred .__star_n
        }
    });
 });

有没有办法在ajax成功后执行切换？和/或有什么其他方法可以更好地工作？

谢谢！

4

1 回答 1

1

与其切换显示哪个图像，不如切换 CSS 类可能更容易。因此，如果您的 HTML 是这样设置的：

<div class="conversation">
    <span class="star"></span>
    <span>blah blah blah blah</span>
</div>

然后你有以下CSS：

.conversation{
    padding:3px 5px;
    border: 1px solid #CCC;
    margin-top:3px;
}

.star{
    background-color: hsl(200, 90%, 90%);
    border:1px solid #333;
    display:inline-block;
    height:20px;
    width:20px;
}

.star.state-selected{
    background-color: hsl(60, 70%, 60%);
}

现在你所要做的就是切换state-selected每个类<span class='star'>

这是一些示例 JavaScript

$(".star").click(function() {
    var $thisStar = $(this);
    
    $.ajax({
        type: 'POST',
        url: "./process.conversation.php",
        data: {method: 'star'},
        cache: true,
        success: function() {
            $thisStar.toggleClass("state-selected");
        }
        
    });
    
});

演示：http: //jsfiddle.net/fbvg9/

于 2013-01-26T04:29:39.363 回答