页面上有多个图像，并在每个图像下显示来自 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>';

这个 sn-p 处于循环中并显示来自 DB 的图像。我添加了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 保存到数据库中。

那么我怎样才能在被点击的图片上显示这条消息呢？

更新 阿贾克斯

    $(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/