logo标签列表

点赞按钮-在两个功能之间切换

javascriptjquerytoggle
5

当“喜欢”按钮被点击时，我希望能够在两个功能之间进行切换。

 <div class="like">
  <div class="count"><%= post.num_likes %> </div>
  <div class="icon" id="like"><i class="icon-thumbs-up-alt"></i></div>
</div>

现在我有：

$(".like").click(function(event){       
event.stopPropagation();                    
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");                           
 likePost(TestCanvas, $(this).prev('div').find('.hideThis').text());    
 });

likePost(canvasID, postID)带有参数，与API进行交互。当我再次点击.like时，我想调用unlikePost()。

是否有一种简单的方法在点击.like时在likePost()和unlikePost()之间切换？

我尝试过:

$('.like').toggle(function() {
 alert('First handler for .toggle() called.');
 likePost(TestCanvas, $(this).prev('div').find('.hideThis').text());
}, function() {
alert('Second handler for .toggle() called.');
unlikePost(TestCanvas, $(this).prev('div').find('.hideThis').text());
});

它并不像我想象的那样工作。似乎在页面加载时执行，而不是在点击“.like”时执行。

既然你正在应用一个类，你可以使用 hasClass 方法来检查该类是否存在。 - crush
2
.toggle(fn1, fn2) 方法自 jQuery 1.9 版本起已被弃用。 - Alnitak
谢谢你，朋友，问了我一直在寻找的同样的问题 ;) - Smile
6个回答
5

切换一个类。通过读取元素是否具有该类，您可以推断用户是否喜欢或取消了它的喜欢：

$('.like').click(function() {
  var val = parseInt($(this).text(), 10);
  $(this).toggleClass('is-liked');
  
  if ($(this).hasClass('is-liked')) {
    val++
    // User has liked (insert userId, itemId into Likes table)
  } else {
    val--
    // User removed his like (delete from table Likes where userId and itemId)
  }
  
  $(this).text(val);
});
.like {
  font: 14px/1.4 sans-serif;
  display: inline-block;
  padding: 3px 10px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #0bf;
  font-weight: bold;
  user-select: none;
}
.like:after {
  content: "";
  vertical-align: top;
  margin-left: 5px;
}

.is-liked {
  background: #0bf;
  color: #fff;
}
<span class="like">0</span>
<span class="like is-liked">3</span>
<span class="like">6</span>
<span class="like">12</span>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

2
当喜欢时可以添加“liked”类。
$('.like').on('click', function() {
  if $(this).hasClass("liked") {
    //do unlike
    $(this).removeClass("liked");
  }
  else {
    //do like
    $(this).addClass("liked");
  }
});
2
myBool 在那里做什么？ - Sumurai8
1
你可以使用元素自身的数据来存储切换的当前状态，使用$(this).data()。这将允许许多实例的.like元素独立工作。
（一般而言，我不喜欢使用class值来表示实际程序状态。在我看来，类是用于样式而非逻辑）。
由于你的两个函数具有相同的参数，你也可以根据当前状态获取所需函数的引用，然后调用它：
$(".like").on('click', function(event) {
    // from OP's code
    event.stopPropagation();
    $("i", this).toggleClass("icon-thumbs-up-alt icon icon-thumbs-up");

    // extract and toggle state (first click _sets_ state to "truthy")
    var data = $(this).data();
    data.state ^= 1;

    // determine which function to call, then call it - DRY
    var fn = data.state ? likePost : unlikePost;
    fn(TestCanvas, $(this).prev('div').find('.hideThis').text());
});
2
这是一个“异或赋值”运算符 - 在这种情况下大致相当于 data.state = !data.state，但更短。严格来说，它创建的是 0 或 1 值而不是 false 和 true。 - Alnitak
啊哈，所以它将根据data.state 是否为真值/假值返回1或0，这再次是真值/假值（1或0）。以前没有见过这样使用。 - adeneo
你已经将它添加到评论中了，我明白了！ - adeneo
@adeneo，我喜欢它是因为它避免了在运算符的两侧重复操作数。 - Alnitak
+1，之前没见过这个，但我喜欢它，得把它偷走，因为我经常做 var = !var 这件事。 - adeneo
0

我不完全确定你在问什么，但我认为这应该能满足你的需求。

var myBool = true;
$('.like').on('click', function() {
  if (myBool) {
    //function 1 here
  }
  else {
    //function 2 here
  }
  myBool = !myBool;
});

编辑：这里是一个Fiddle。

这是假设你只有一个“赞”按钮的情况下。 - chockleyc
0
使用一个类来查找内容是否被喜欢：
$('.like').on('click', function(evt){
          evt.preventDefault();
          if( $(this).is('liked') ){
            $(this).removeClass('liked');
            doUnlike();
          }
          else{
            $(this).addClass('liked');
            dolike();
          }
       }
     doUnlike(){
     //...
     }
     dolike(){
     //.....
     }
0

由于toggleClass将在添加和删除类之间切换，这种方法有点绕。而且创建一个变量不适用于多个按钮。您可以将变量隐藏在div/button内部的隐藏输入标记中，并使用find函数访问它。脚本将切换值，并创建所需的切换效果，因为toggle函数不再支持两个函数，仅用于隐藏和显示。

另一种可能性：

<div class="like">
    <input type="hidden" value=0 />
    One
    <div class="display"></div>
</div>
<div class="like">
    <input type="hidden" value=0 />
    Two
    <div class="display"></div>
</div>
<script>
    $(".like").click(function() {
        var tagvar = "input[type='hidden']";
        if ( $(this).find(tagvar).val() == 0 ) {
            $(this).find(".display").html("yes");
            $(this).find(tagvar).val(1);
        }else {
            $(this).find(".display").html("no");
            $(this).find(tagvar).val(0);
        }
    });
</script>
1
有任何描述吗？ - user7582130
由于toggleClass将在添加和删除类之间进行切换，这种方式有点绕。而且创建一个变量对于多个按钮来说并不合适。您可以将变量隐藏在div/button内部的隐藏输入标记中，并使用find函数访问它。脚本将切换值，并创建所需的切换效果，因为toggle函数不再支持两个函数，只用于隐藏和显示。 - Volt
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接