переключиться между двумя функциями - jquery

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, сообщения дан) принимает параметры и взаимодействует с API Когда я нажимаю на .like снова, я хотел бы назвать unlikePost().

Есть ли простой способ переключения между подобными способами() и unlikePost(), когда .like нажата?

Ive пытался:

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

Edit: Смотрите также: https://stackoverflow.com/a/21520499/383904

LIVE DEMO

JS:

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 класс к вашему элементу (где btn аргумент является ссылкой на this кнопку нажал):

<div class="like userLikes"> 
    <!-- ... --> 
</div> 

---

Более упрощенный пример может быть (с использованием <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> 

УС:

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

Или даже без 2-х функций:

LIVE DEMO

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

Answer 2

Не совсем уверен, что вы просите, но это должно делать то, что вы хотите, я думаю.

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

Редактировать: Вот Fiddle.

Answer 3

Вы можете добавить понравившийся класс, если понравится.

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

Answer 4

Вы можете использовать собственные данные Элемент для сохранения текущего состояния переключателя с помощью $(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 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>