1

Question

单击“赞”按钮时，我试图在两个功能之间切换。

 <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时，我想调用differentPost（）。

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

我试过了：

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

Answer 1

修改：另请参阅：https://stackoverflow.com/a/21520499/383904

的 LIVE DEMO

1

JS：_{（其中btn参数是对this点击按钮的引用）}

function like( btn ){ alert("Liked "+ btn.textContent ); // jQuery uses: $(btn) } function dislike( btn ){ alert("Disliked "+ btn.textContent ); } $('.like').click(function(){ $(this).toggleClass('userLikes'); return $(this).hasClass('userLikes') ? like(this) : dislike(this); });

如果用户已经喜欢，可以从服务器端读取，并将userLikes类附加到您的元素：

<div class="like userLikes">  </div>

2

更简单的例子是（使用<span>元素）：

的 LIVE DEMO

<强> HTML ：

<span class="like">0</span> <span class="like userLikes">3</span> <span class="like">6</span> <span class="like">12</span>

<强> CSS：

.like{ border-radius:4px; text-align:center; display:inline-block; padding:3px 10px; background:#ddd; cursor:pointer; box-shadow: 0 1px 1px -1px #666; } .userLikes{ background:#bada55; }

<强> JS：

function like( el,val ){ $(el).text(++val); } function dislike( el,val ){ $(el).text(--val); } $('.like').click(function(){ var val = $(this).text(); $(this).toggleClass('userLikes'); return $(this).hasClass('userLikes') ? like(this,val) : dislike(this,val); });

3

甚至没有2个功能：

的 LIVE DEMO

$('.like').click(function(){ var val = $(this).text(); $(this).toggleClass('userLikes').text( $(this).hasClass('userLikes') ? ++val : --val ); });

Answer 2

您可以在喜欢时添加“已赞”类。

$('.like').on('click', function() {
  if $(this).hasClass("liked") {
    //do unlike
    $(this).removeClass("liked");
  }
  else {
    //do like
    $(this).addClass("liked");
  }
});

Answer 3

您可以使用元素自己的数据来使用$(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());
});

Answer 4

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

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

修改：这是Fiddle。

Answer 5

使用一个班级来查找是否喜欢内容：

$('.like').on('click', function(evt){
          evt.preventDefault();
          if( $(this).is('liked') ){
            $(this).removeClass('liked');
            doUnlike();
          }
          else{
            $(this).addClass('liked');
            dolike();
          }
       }
     doUnlike(){
     //...
     }
     dolike(){
     //.....
     }

Answer 6

因为toggleClass会切换添加和删除类，这无论如何都是一种解决方法。创建变量不适合多个按钮。您可以在div /按钮内的隐藏输入标记中隐藏变量，并使用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>

在两个函数之间切换 - jquery

6 个答案:

1

2

3