更改img scr基於點擊圖標

Question

我創建了一個連接事件表，每行都由事件填充，所以當我點擊連接時，圖標將會改變。我的問題是，當我點擊一個事件時，它改變的圖標，但不對應一個正確的行，我只點擊第一行圖標，即使我點擊中間行也會改變。

<td> 
<a href="#" class="join_now" id="<?php echo $row['event_id'];?>"> 

    <?php $join=$ db->verify_already_join($official_id, $id); if ($join == 0) { echo " 

    <img src='images/join.png' id='join' width='30' height='30' />"; } else { echo " 

    <img src='icon/votenow.png' id='join' width='30' height='30' />"; } ?> 

</a> 
<td> 

我阿賈克斯JQUERY

<script> 
    $(document).ready(function() { 
     var name = <? php echo json_encode($name); ?> ; 
     var off_id = <? php echo json_encode($official_id); ?> ; 
     $(".join_now").live("click", function() { 
      var id_value = $(this).attr("id"); 
      var newSrc = 'icon/votenow.png'; 
      $.ajax({ 
       type: "POST", 
       url: "join.now.php", 
       data: "id=" + id_value + "&name=" + name + "&official=" + off_id, 
       success: function (html) { 
        if (html == '0') { 
         $(".err_msg").html("<strong><font color='red'>You have Successfully Join this Event!</font></strong>"); 
         $('#join').attr('src', newSrc); 
        } 
        if (html == '1') { 

         $(".err_msg").html("<strong><font color='red'>You Already Join this Event!</font></strong>"); 
        } 
       }, 
       beforeSend: function() { 
        $(".err_msg").html("<strong>Loading...</strong>") 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

Answer 1

  $('#join').attr('src', newSrc); 

該行會改變的，有參加的一個id的第一個元素的形象。你的代碼是錯誤的，因爲在你的表中會有多個元素的ID爲join ..這是錯誤的。在你的DOM中，不應該有2個具有相同ID的元素。

更改您的IMG代碼是

<td> 
<a href="#" class="join_now" id="<?php echo $row['event_id'];?>"> 

    <?php $join=$ db->verify_already_join($official_id, $id); if ($join == 0) { echo " 

    <img src='images/join.png' class='join' width='30' height='30' />"; } else { echo " 

    <img src='icon/votenow.png' class='join' width='30' height='30' />"; } ?> 

</a> 
<td> 

然後代碼來改變圖片src相反，它應該是

  $('#'+id_value + ' .join').attr('src', newSrc); 

，你有你的自我正確形成DOM