Question

目前我正在为一个“喜欢”的新闻提供系统工作，1页上有多个新闻提要，这意味着有多个具有相同ID的按钮。这是我用来喜欢帖子的jquery：

$(document).ready(function(){
    $('#likebutton').click(function(){ 
        $.ajax({
            url : 'inc/ajax.php',
            type : 'POST',
            data : {
                action : 'like_post',
                poid : $('#likebutton').data('poid')
            },
            dataType : 'JSON',
            success : function(result) {
                if (result.xhr == 'success') {
                    $('#likebutton').attr('disabled','true');
                    $('#likes').html(parseInt($('#likes').html()) + 1);
                } else if (result.xhr == 'error'){
                    alert('An internal error occurred, try again later.')
                }
            }
        });
    });
    $('#unlikebutton').click(function(){
        $.ajax({
            url : 'inc/ajax.php',
            type : 'POST',
            data : {
                action : 'unlike_post',
                poid : $('#unlikebutton').data('poid')
            },
            dataType : 'JSON',
            success : function(result) {
                if (result.xhr == 'success') {
                    $('#unlikebutton').attr('disabled','true');
                    $('#likes').html(parseInt($('#likes').html()) - 1);
                } else if (result.xhr == 'error'){
                    alert('An internal error occured, try again later.')
                }
            }
        });
    });
});

一切正常，直到它必须禁用like按钮并向计数器添加1。它的作用是禁用该页面上的所有类似按钮，我需要将页面刷新为另一篇文章。我知道这是因为有超过1个HTML元素具有相同的ID，但我不能给出唯一的ID，因为回显帖子和javascript的函数在不同的页面上，如果我要创建唯一的ID我也是d必须为该页面上的每个帖子重复此功能（10）。

编辑：

相关HTML

<div class='media-body'>
    <h4 class='media-heading'>post #1</h4>
    <p>post #1</p>
    <button data-poid="10" class="btn btn-link btn-xs likebutton" style="font-size: 14px;"><i class="fa fa-thumbs-up"></i>  <small>Like</small>
    </button>
    <h5 id='likes' style="display: inline;">0</h5>  <small>likes</small>
    <small style="cursor:pointer;" onClick="$('#comments10').toggle('slow');">Add Comment</small>
    <form action="" method="post" id="comments10" style="display:none;">
        <input type="hidden" name="id" value="10">
        <textarea style="width:100%;height:100px;" name="comment"></textarea>
        <br />
        <input type="submit" class="btn btn-primary" value="Add comment" />
    </form>
</div>

修改我是编辑错误页面的最大的白痴...我很遗憾浪费每个人的时间和@ satapal的回答非常感谢你！

Answer 1

在HTML中ID必须是唯一的。如果您使用HTML文档无效。

我建议您使用类而不是重复的ID。

您可以使用class selector

选择包含课程的元素

描述：选择具有给定类的所有元素。

语法

jQuery( ".class" )

其中

class：要搜索的类。一个元素可以有多个类;只有其中一个必须匹配。

修改后的代码为您提供了如何使用类的示例

$(document).ready(function () {
    $('.likebutton').click(function () {
        var self = this;
        $.ajax({
            url: 'inc/ajax.php',
            type: 'POST',
            data: {
                action: 'like_post',
                poid: $(self).data('poid')
            },
            dataType: 'JSON',
            success: function (result) {
                if(result.xhr == 'success') {
                    $(self).attr('disabled', 'true'); //Here I have used self
                    $('#likes').html(parseInt($('#likes').html()) + 1);
                } else if(result.xhr == 'error') {
                    alert('An internal error accoured, try again later.')
                }
            }
        });
    });
    $('.unlikebutton').click(function () {
        var self = this;
        $.ajax({
            url: 'inc/ajax.php',
            type: 'POST',
            data: {
                action: 'unlike_post',
                poid: $(self).data('poid')
            },
            dataType: 'JSON',
            success: function (result) {
                if(result.xhr == 'success') {
                    $(self).attr('disabled', 'true'); //Here I have used self
                    $('#likes').html(parseInt($('#likes').html()) - 1);
                } else if(result.xhr == 'error') {
                    alert('An internal error accoured, try again later.')
                }
            }
        });
    });
});

修改

根据更新的HTML，您应该使用

var likes = $(self).parent().find('.likes'); likes.html(parseInt(likes.html()) - 1);

而不是

$('#likes').html(parseInt($('#likes').html()) - 1); //Use +1 for like and -1 for unlike

Answer 2

您可以检查父级范围内的.likes：

$(document).ready(function(){
    $('.likebutton').click(function(){
        var self = this;
        $.ajax({
            url : 'inc/ajax.php',
            type : 'POST',
            data : {
                action : 'like_post',
                poid : $(self).data('poid')
            },
            dataType : 'JSON',
            success : function(result) {
                if (result.xhr == 'success') {
                    $(self).attr('disabled','true');
                    $($(self).parent()).find('.likes').html(parseInt($($(self).parent()).find('.likes').html()) + 1);
                } else if (result.xhr == 'error'){
                    alert('An internal error occurred, try again later.')
                }
            }
        });
    });
    $('.unlikebutton').click(function(){
        var self = this;
        $.ajax({
            url : 'inc/ajax.php',
            type : 'POST',
            data : {
                action : 'unlike_post',
                poid : $(self).data('poid')
            },
            dataType : 'JSON',
            success : function(result) {
                if (result.xhr == 'success') {
                    $(self).attr('disabled','true');
                    $($(self).parent()).find('.likes').html(parseInt($($(self).parent()).find('.likes').html()) - 1);
                } else if (result.xhr == 'error'){
                    alert('An internal error occured, try again later.')
                }
            }
        });
    });
});

确保添加了课程likes，unlikebutton和likebutton。并且，确保添加父级。 Live Demo

HTML更改

<div class='media-body'>
    <h4 class='media-heading'>post #1</h4>
    <p>post #1</p>
    <button data-poid="10" class="btn btn-link btn-xs likebutton" style="font-size: 14px;"><i class="fa fa-thumbs-up"></i>  <small>Like</small>
    </button>
    <h5 class='likes' style="display: inline;">0</h5>  <small>likes</small>
    <small style="cursor:pointer;" onClick="$('#comments10').toggle('slow');">Add Comment</small>
    <form action="" method="post" id="comments10" style="display:none;">
        <input type="hidden" name="id" value="10">
        <textarea style="width:100%;height:100px;" name="comment"></textarea>
        <br />
        <input type="submit" class="btn btn-primary" value="Add comment" />
    </form>
</div>

Answer 3

您不应在同一页面上多次使用相同的ID。这就是为什么它被称为ID。 :)你应该使用类，然后在你的jQuery中，使用this关键字来访问被点击元素的属性。示例：

$('.likebutton').click(function(){ 
    $.ajax({
        url : 'inc/ajax.php',
        type : 'POST',
        data : {
            action : 'like_post',
            poid : $(this).data('poid')
        },
        dataType : 'JSON',
        success : function(result) {
            if (result.xhr == 'success') {
                $(this).attr('disabled','true');
                $('#likes').html(parseInt($('#likes').html()) + 1);
            } else if (result.xhr == 'error'){
                alert('An internal error accoured, try again later.')
        } }
    });
});

Answer 4

在我看来，你在那里使用几乎完全相同的代码。使其更像可以重复使用

var createLikeHandler = function (action, buttonSelector, counterSelector) {
    return function () {
        $.ajax({
            url : 'inc/ajax.php',
            type : 'POST',
            data : {
                action : action + '_post',
                poid : $(buttonSelector).data('poid')
            },
            dataType : 'JSON',
            success : function(result) {
                if (result.xhr == 'success') {
                    $(buttonSelector).attr('disabled','true');
                    var increment = action === 'like' ? 1 : -1
                    $(counterSelector).html(parseInt($(counterSelector).html()) + increment);
                } else if (result.xhr == 'error'){
                    alert('An internal error accoured, try again later.')
            }
        }

    }
};

然后您可以使用之前推荐的类选择器并自动创建，例如执行

var likeUI = [{
    like: '.like1',
    unlike: '.unlike1',
    counter: '.counter1'
},
{
    like: '.like2',
    unlike: '.unlike2',
    counter: '.counter2'
}];

likeUI.forEach(function (likeElement) {
    $(likeElement.like).click(createLikeHandler('like', likeElement.like, likeElement.counter));
    $(likeElement.unlike).click(createLikeHandler('unlike', likeElement.unlike, likeElement.counter));
});

具有相同ID的HTML元素

4 个答案: