5

I'm trying to toggle between two functions when a "Like" button is clicked. 

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

right now I have:

$(".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) takes parameters and interacts with an API When I click on .like again, I would like to call unlikePost().

Is there an easy way to toggle between likePost() and unlikePost() when .like is clicked?

Ive tried:

$('.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());
});

Its not working as i thought it would though. Seems to execute on page load instead of on click of .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、実際のプログラムの状態を表すために値を使用するのは嫌いです。IMHO、クラスはロジックではなくスタイリング用です）。

2 つの関数は同じパラメーターを持っているため、現在の状態に基づいて目的の関数への参照を取得し、それを呼び出すこともできます。

$(".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

1 つのクラスを使用して、コンテンツが気に入ったかどうかを確認します。

$('.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 に答える