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 时，我想调用likePost()。

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

我试过了：

$('.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 时执行。

4

6 回答 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>

于 2013-07-01T19:52:40.440 回答
2

您可以在喜欢时添加“喜欢”的课程。

$('.like').on('click', function() {
  if $(this).hasClass("liked") {
    //do unlike
    $(this).removeClass("liked");
  }
  else {
    //do like
    $(this).addClass("liked");
  }
});
于 2013-07-01T19:43:54.750 回答
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());
});
于 2013-07-01T19:52:15.557 回答
0

不完全确定你在问什么，但这应该做你想要的。

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

编辑：这是一个Fiddle。

于 2013-07-01T19:41:04.860 回答
0

使用一个类来查找内容是否被喜欢：

$('.like').on('click', function(evt){
          evt.preventDefault();
          if( $(this).is('liked') ){
            $(this).removeClass('liked');
            doUnlike();
          }
          else{
            $(this).addClass('liked');
            dolike();
          }
       }
     doUnlike(){
     //...
     }
     dolike(){
     //.....
     }
于 2013-07-01T19:53:18.267 回答
0

由于 toggleClass 会切换添加和删除类，这无论如何都是一种解决方法。并且创建变量不适合多个按钮。您可以在 div/button 内的隐藏输入标签中隐藏变量，并使用 find 函数访问它。脚本将切换值并创建所需的切换效果，因为切换功能不再支持两个功能，仅用于隐藏和显示。

另一种可能：

<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>
于 2017-04-23T07:20:09.673 回答