Question

我的应用中有一条评论列表。用户需要通过单击图标在他/她的控制面板中显示/隐藏它们。

你可以在这里看到一些评论：

<div><a  href="" class="hideComment" title="show/hide" data-commnetid="74" data-approved="0" >Show</a></div>

<div><a  href="" class="hideComment" title="show/hide" data-commnetid="71" data-approved="0" >show</a></div>

<div><a  href="" class="hideComment" title="show/hide" data-commnetid="70" data-approved="1" >hide</a></div>

已批准== 0 表示您的评论隐藏，您可以显示，已批准== 1 是反向。

这是在上面的评论列表之后出现的jquery代码：

$(function () {
   $(".hideComment").click(function () {

     var url = "<?php echo \Cake\Routing\Router::url(array('controller' => 'videos', 'action' => 'hideshowcomment')) ?>";
     var commentID = $(this).attr('data-commnetid');
     var approved = $(this).attr('data-approved');
     alert(approved);
     if(approved == 1){
         $( this ).html('show');
         $('.hideComment').attr('data-approved',0);
     }else if (approved == 0) {
         $( this ).html('hide');
         $('.hideComment').attr('data-approved',1);
     }
     $.ajax({
         dataType: 'json',
         type: "POST",
         url: url,
         data: {id : commentID},
         success: function (data) {
             //alert('success');
         }
     });  
     return false;
  });
});

首先点击一个项目效果很好。但是，如果我点击另一个项目，则显示错误信息。

var approved 存储以前的数据已批准。其余代码工作，它向 hideshowcomment 操作发送ajax请求，依此类推。

Answer 1

您需要更新当前元素的值，而不是所有hideComment元素

$(this).attr('data-approved', 1);

当您设置$('.hideComment').attr('data-approved',0);时，您正在更改页面中所有hideComment元素的属性值。

Answer 2

尝试使用

var approved = $(this).data("approved")

而不是

 var approved = $(this).attr('data-approved');

对于commentID属性也一样。

JQuery存储以前定义的变量

2 个答案: