具有相同ID的HTML元素

目前我正在为一个“喜欢”的新闻提供系统工作，1页上有多个新闻提要，这意味着有多个具有相同ID的按钮。 这是我用来喜欢post的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.') } } }); }); }); 

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

编辑：

相关的HTML

 
 
post #1
 
post #1
  Like  
0
 likes Add Comment 
   
  
  

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

Answer 1

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

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

您可以使用类选择器选择具有类的元素

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

句法

 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添加。 并且，确保添加父级。 现场演示 。

HTML更改

 
 
post #1
 
post #1
  Like  
0
 likes Add Comment 
   
  
  

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