Javascript 具有相同ID的HTML元素

目前，我正在为一个新闻提要的“like”系统工作，在一个页面上有多个新闻提要，这意味着有多个具有相同ID的like按钮。 这是我用来喜欢这些帖子的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为止。它所做的是禁用该页面上的所有like按钮，我需要刷新页面以喜欢另一篇文章。我知道这是因为有超过1个HTML元素具有相同的ID，但我不能给出唯一ID，因为回显帖子和javascript的函数位于不同的页面上，而且如果我要创建唯一ID，我必须对该页面上的每个帖子重复此函数（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>

职位#1
职位#1

喜欢
0喜欢
添加注释

编辑

---

我是编辑错误页面的最大白痴。。。我很抱歉浪费了大家的时间，@satapal的回答很有效，非常感谢

ID在HTML中必须是唯一的。如果使用该ID，HTML文档将变得无效

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

可以使用选择包含类的元素

说明：选择具有给定类的所有元素

语法

jQuery( ".class" )

在哪里

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

修改代码以提供如何使用类的示例

编辑：

根据更新的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

---

您不应该在同一页上多次使用同一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.')
        } }
    });
});

---

在我看来，您使用的代码几乎完全相同。 让它更具可重用性，比如

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));
});

---

您可以在父对象的范围内检查

.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

、

unkebutton

和

likebutton

。而且，请确保添加一个父级

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>

职位#1
职位#1

喜欢
0喜欢
添加注释


代替使用IDS，考虑使用类。两个元素不能具有相同的。ID@ReCaptcha我该怎么做，你能用我的脚本给我看一个例子吗？@Satpal read original post edit#2如果这个类类似于btn btn primary btn xs likebutton，这行吗？等一下，我想一下，like计数器也不是唯一的，如何使此脚本增加正确的like计数器？@JordanJones，我已更新了答案。我粘贴了这段代码并将所有内容更改为类，但当我单击“喜欢”或“不喜欢”按钮时，什么也没有发生。@JordanJones，我忘了将ID更改为数据中的类。请重试并查看？上述答案的问题是
$（'.unlikebutton'）.attr（'disabled'，'true'）
将始终指向第一个
未单击按钮
元素，与
类似按钮
相同<代码>$（此）

指的是回调方法中的什么？

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