具有相同ID的HTML元素

问题描述：

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

At the moment I'm working for a "like" system for news feed, there are multiple news feeds on 1 page which means there are multiple like buttons with the same ID. this is the jquery I use to like the posts:

$(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.')
                }
            }
        });
    });
});

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

Everything works fine until the point where it has to disable the like button and add 1 to the counter. What it does is disables all the like buttons on that page and I need to refresh the page to like another post. I know this is because there are more than 1 HTML elements that have the same ID but I can't give the unique ID's because the function that echoes the post and the javascript are on different pages and also if I would create unique ID's I'd have to repeat this function for every post on that page (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的回答非常感谢你！

EDIT I was the biggest idiot editing the wrong page... i am so sorry for wasting everyone's time and @satapal's answer worked thank you very much!

答

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

IDs must be unique in HTML. If you use that your HTML documents becomes invalid.

我建议您改用类重复ID。

I would recommend you to use classes instead of duplicate ID.

您可以使用类选择器

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

Description: Selects all elements with the given class.

语法

jQuery( ".class" )

其中

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

class: A class to search for. An element can have multiple classes; only one of them must match.

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

$(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，你应该使用

As per updated HTML, You should use

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

相关推荐