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

此代码段处于循环中并显示来自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保存到DB中。

那么我怎样才能在点击的图像上显示此消息？

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/

页面上有多个图像，并在每个图像下显示ajax的成功文本

1 个答案: