jQuery的Css類沒有設置Corectly

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>'; 

正如你可以在圖像的點擊看到它發送AJAX請求與連接到相應於該元素的ID它點擊URL變量star_it.php。

這工作正常，第一次點擊，它改變圖像，ALT文本和類使用jQuery。但是，連續點擊後，似乎仍然採用原始路徑。

因此，如果圖像在第一次點擊後加星標，那麼jQuery將繼續對項目進行星標（至少在網頁上）。我用Firebug來確定這是事實。首次運行時，它會將非星號圖像更改爲加星標，並在數據庫中進行更改。在第二次點擊並進一步點擊時，它仍然通過$（「img.unstarred」）。click（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") }); 
} 
     }); 

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