Question

我在单个页面上显示动态内容列表，其中包含相同的标记和每个内容的按钮。我希望用户能够单击“赞”按钮，并禁用该条目的“不喜欢”按钮，反之亦然。

我的问题是：如果用户点击“不喜欢”，那么页面上的所有“赞”按钮都会被禁用。我只想让该条目的相关“赞”按钮受到影响。

我有这个部分有效的代码，但正如我所说，它改变了页面上的所有Like按钮。如何只为其中一个更新内容？

注意：这些按钮功能的后端处理工作正常，这个问题仅涉及jquery和bootstrap功能。非常感谢。

<div class="text-right">
<span class="like"><a class="likelink btn btn-info btn-xs" href="{path='sightings/ajax_like'}/{entry_id}"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a></span>
<span class="flag"><a class="flaglink btn btn-info btn-xs" href="{path='sightings/ajax_flag'}/{entry_id}"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a></span>
</div>

<div class="text-right">
<span class="like"><a class="likelink btn btn-info btn-xs" href="{path='sightings/ajax_like'}/{entry_id}"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a></span>
<span class="flag"><a class="flaglink btn btn-info btn-xs" href="{path='sightings/ajax_flag'}/{entry_id}"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a></span>
</div>

<div class="text-right">
<span class="like"><a class="likelink btn btn-info btn-xs" href="{path='sightings/ajax_like'}/{entry_id}"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a></span>
<span class="flag"><a class="flaglink btn btn-info btn-xs" href="{path='sightings/ajax_flag'}/{entry_id}"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a></span>
</div>


$(document).ready(function(){

//  FLAGGING

    $('a.flaglink').on('click', function(e){
        e.preventDefault();
        var flaglink = $(this);
        var url = flaglink.attr('href');
        if (url !== null) {
            $.ajax({
                url: url,
                success: function(results) {

                    flaglink.closest('.flag').html('<a href="#" class="flaglink btn btn-xs btn-danger" title="flagged"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Flagged</a>').fadeIn('slow');
                    $('span.like').closest('a.likelink').prop('disabled', true);

                },
                error: function(results) {
                    console.log('ERROR:' + results);
                }
            });
        } // if

    }); //  flag


}); // document ready

Answer 1

您已经拥有flaglink的实例，因此请使用该特定实例进行遍历，而不是包含所有该类所存在的更通用的$('span.like')

类似的东西：

flaglink.parent().siblings('.like').find('a.likelink').prop('disabled', true);

定位特定元素以替换重复元素的长列表中的内容

1 个答案: