在頁面上顯示多個圖像並在每張圖像下顯示來自ajax的成功文本

Question

我在頁面上有多個圖像。每個圖像都有「添加到收藏夾」選項。 一切工作都很好，除了圖像被添加或不收藏的消息顯示在上面的圖像。

成功/失敗消息僅顯示在第一張圖像上方。我知道我必須爲每張圖片使用唯一的ID，但我無法理解。

這裏是我展示圖片的HTML部分。

echo ' 
<article class="main-post" id="'.$row['image_id'].'" > 
    <div class="article-top"> 
     <hr /> 
     <h1><a href="imagePreview.php?image_id='.$row['image_id'].'">'.$row['image_caption'].'</a></h1> 
     <div class="counters-line"> 
      <div class="pull-left"> 
       <span id="message_favorites"></span> 
      </div> 
      <div id="'.$row['image_id'].'" class="pull-right"> 
       <div class="buttons-bar"> 
        <div class="buttons">        
        <a href="javascript:;" class="bookmarked has-tooltip" data-title="Add to Favorites" id="'.$row['image_id'].'"></a>            
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="article-content">         
      <figure>  
      <a href="imagePreview.php?id='.$row['image_id'].'"><img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/></a> 
      </figure> 
     </div> 
    </div> 
</article>'; 

這個片段是在從數據庫循環，並顯示圖像。我已添加id="$row['image_id']" to the`這樣每個文章都有獨特的ID。

成功的消息在這裏展示

<div class="pull-left"> 
    <span id="message_favorites"></span> 
</div> 

這是AJAX功能

$(document).ready(function(){ 
$('.bookmarked', $('.buttons')).click(function(){ 
    $.post('misc/add_favorites.php', 
    { 
     "image_id": $(this).attr('id'), 
    }, 
    function(data){ 
     if(data == 0){ 
      $('#message_favorites').html('<div id="alertFadeOut" style="color: green">Added to favorites!</div>'); 
      $('#alertFadeOut').fadeOut(3000, function() { 
       $('#alertFadeOut').text(''); 
      }); 
     } 
     else { 
      $('#message_favorites').html('<div id="alertFadeOut" style="color: green">It's already in favorites!</div>'); 
      $('#alertFadeOut').fadeOut(3000, function() { 
       $('#alertFadeOut').text(''); 
      }); 
     } 
    }); 
}); 
}); 

ajax的部分將數據發送到add_favorites.php其中保存圖像ID和用戶ID到數據庫。

那麼我怎麼能在點擊的圖像上顯示這條消息呢？

UPDATE 的Ajax

$(document).ready(function(){ 
$('.bookmarked', $('.buttons')).click(function(){ 
    $.post('misc/add_favorites.php', 
    { 
     "image_id": $(this).attr('id'), 
    }, 
    var classes = $(this).attr('class');  //fetch all classes of the clicked item (this is a string) 
//alert('The classes: '+classes); 
    var classarray = classes.split(' ');  //split the string into it parts seperated by "blank" 
    $.each(classarray, function(index, item){  // execute this for every subpart 
    //alert(index+' '+item); 
    if(index==2)   // since the third (better: use regexp) subpart stores the id-information... 
    { 
     //alert(item); 
      $('#message_favorites').html('<div id="alertFadeOut" style="color: green">Added to favorites!</div>'); 
      $('#alertFadeOut').fadeOut(3000, function() { 
       $('#alertFadeOut').text(''); 
      });    
    } 
     else { 
      $('#message_favorites').html('<div id="alertFadeOut" style="color: green">It's already in favorites!</div>'); 
      $('#alertFadeOut').fadeOut(3000, function() { 
       $('#alertFadeOut').text(''); 
      }); 
     }   
});   
}); 
}); 

HTML

echo ' 
<article class="main-post" id="'.$row['image_id'].'" > 
    <div class="article-top"> 
     <hr /> 
     <h1><a href="imagePreview.php?image_id='.$row['image_id'].'">'.$row['image_caption'].'</a></h1> 
     <div class="counters-line"> 
      <div class="pull-left"> 
       <div id="'.$row['image_id'].'"><span id="message_favorites"></span></div> 
      </div> 
      <div id="'.$row['image_id'].'" class="pull-right"> 
       <div class="buttons-bar"> 
        <div class="buttons">        
        <a href="javascript:;" class="bookmarked has-tooltip '.$row['image_id'].'" data-title="Add to Favorites" id="'.$row['image_id'].'"></a>            
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="article-content">         
      <figure>  
      <a href="imagePreview.php?id='.$row['image_id'].'"><img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/></a> 
      </figure> 
     </div> 
    </div> 
</article>'; 

Answer 1

一種解決方案可以是添加的ID號碼的按鈕，以及（如類）：

<a href="javascript:;" class="bookmarked has-tooltip '.$row['image_id'].'" 
    data-title="Add to Favorites" id="'.$row['image_id'].'"> 
</a> 

然後使用ajax請求的上下文和查詢attr()方法來獲取分類列表按鈕（見http://api.jquery.com/jquery.ajax）。隨着分裂（見Get class list for element with jQuery）然後你可以提取ID，並用它來解決正確的對象...

例子：https://jsfiddle.net/ojk8kdg9/5/