Question

我正在尝试实现一个类似于gmail的主演系统，能够通过点击图形来标记重要项目。

if($starred == 1){
        $starred = '<img class="starred" id="row_'.$trouble_ticket_id.'" src="images/icons/silk/award_star_gold_3.png" alt="Star">';
    }
    else{
        $starred = '<img class="unstarred" id="row_'.$trouble_ticket_id.'" src="images/no_star.png" alt="No Star">';
    }

$content.= '<td><a href="ticketEdit.php?id='.$trouble_ticket_id.'"><img src="images/icon_edit.png" alt="Edit" /></a></td><td><a href="adminTicketDetail.php?id='.$trouble_ticket_id.'">'.$ticket_code.'</a></td><td>'.$requested_by.'</td><td>'.$department.'</td><td>'.$telephone.'</td><td>'.$room_number.'</td><td>'.$subject.'</td><td>'.$original_date_request.'</td><td style="text-align: center;">'.$starred.'</td>';


<script type="text/javascript">
    $(document).ready(function() {
        $("img.unstarred").click(function(){
            $(this).attr("src", "images/icons/silk/award_star_gold_3.png");
            $(this).attr("alt", "Starred");
            $(this).removeClass('unstarred').addClass('starred');
            $.get("star_it.php", { id: $(this).attr("id") } );
        });
        $("img.starred").click(function(){
            $(this).attr("src", "images/no_star.png");
            $(this).attr("alt", "Unstarred");
            $(this).removeClass('starred').addClass('unstarred');
            $.get("star_it.php", { id: $(this).attr("id") } );
        });
                 }); 
    }); 
</script>';

正如您在单击图像时看到的那样，它会向star_it.php发送一个ajax请求，其中附带的URL变量对应于所单击元素的ID。

这在第一次单击时工作正常，它使用jQuery更改图像，ALT文本和类。但是，在连续点击后，似乎仍然采用了原始路径。

因此，如果图像在第一次点击后加星标，则jQuery将继续为该项目加注星标（至少在网页上）。我使用Firebug来确定这实际上正在发生。首次运行时，它会将未加星标的图像更改为已加星标并在数据库中进行更改。在第二次点击和进一步点击时，它仍然通过$（“img.unstarred”）。点击（function（））它应该通过img.starred函数并将图像标记为未加星标。

我通过删除和添加css类来完成所有这些操作。当点击加星标的img时，我删除已加星标的css类并添加未加星标的css类。但是，这似乎不起作用。我真的无法使用img的ID进行onclick，因为它是动态生成的。

有什么想法吗？

Answer 1

将其合并到一个函数中并使用css为div提供正确的背景图像，而不是为图像分配不同的源。使用css给你的力量。

<style>
.unstarred{
    background: url(images/no_star.png);
}
.starred{
    background: url(images/icons/silk/award_star_gold_3.png);
}
</style>

<div class="star unstarred" />

您的javascript就是这样，因为您的star_it.php根据发送给它的ID知道自己切换。

$(document).ready(function() {
    $("div.star").click(function(){
        $(this).toggleClass('unstarred').toggleClass('starred');
        $.get("star_it.php", { id: $(this).attr("id") } );
    });
});

Answer 2

您正在将函数应用于尚不存在的元素。更好的方法是合并2个函数和基于当前状态的“切换”。

$("img.star").click(function(){
// get the value
var starred = $(this).attr("alt");
if (starred == 'unstarred') // star it
{
            $(this).attr("src", "images/icons/silk/award_star_gold_3.png");
            $(this).attr("alt", "Starred");
            $(this).removeClass('unstarred').addClass('starred');
            $.get("star_it.php", { id: $(this).attr("id") } );
       } else { // unstar it
            $(this).attr("src", "images/no_star.png");
            $(this).attr("alt", "Unstarred");
            $(this).removeClass('starred').addClass('unstarred');
            $.get("star_it.php", { id: $(this).attr("id") } );
}
        });

你可以稍微清理一下 - 但你明白了。

jQuery Css类未正确设置

2 个答案: