jQuery的。點擊（）/。對（「點擊」 ...）我需要幫助的備用點擊

Question

交換文本我試圖做到的是什麼「喜歡」

$("button .toggleExcerpt) 
    .toggle(function FIRST() { 
     do first function... 
    } , function SECOND() { 
     do second function... 

但因爲它是過時，我不知道使用什麼替代方法。香港專業教育學院嘗試使用的if/else一個。對內部（「點擊」，函數（）...但似乎沒有工作 jQuery的：

var readMore = "<span class='readMore'>read about the solution...</span>"; 
var readLess = "<span class='readLess'>hide full description...</span>"; 

//".toggleExcerpt" is an empty <button> in the HTML 

$(".toggleExcerpt").append(readMore); 

$(".toggleExcerpt") 
    .on("click", function (event) { 
     $(this).contents(".readMore") 
      .replaceWith(readLess); 
     console.log("readMore ran"); 
    }) 
    .on("click", function (event) { 
     $(this).contents(".readLess") 
      .replaceWith(readMore); 
     console.log("readLess ran");    
    }) 

雙方的點擊事件被記錄到控制檯，所以我知道的第一個事件正在運行，然後很快被第二個事件替換，但我很想讓這些（或簡單的跨度內的文本）交替....

我已經已經看了this suggestion，但我不知道如何在我的例子中實現它，也不是如果這個特定的jQuery實現是我需要的。

Answer 1

爲什麼不試試讓來回布爾值交換嗎？

這是你的提琴：https://jsfiddle.net/6y5df0rn/

var readMore = "<span class='readMore'>read about the solution...</span>"; 
var readLess = "<span class='readLess'>hide full description...</span>"; 
var more = true; 

//".toggleExcerpt" is an empty <button> in the HTML 

$(".toggleExcerpt").append(readMore); 

$(".toggleExcerpt") 
    .on("click", function (event) { 
     if (more) { 
      $(this).contents(".readMore") 
       .replaceWith(readLess); 
      console.log("readMore ran"); 
      more = false; 
     } else { 
      $(this).contents(".readLess") 
       .replaceWith(readMore); 
      console.log("readLess ran"); 
      more = true; 
     } 
    }); 

Answer 2

我覺得我爲您創建一個解決方案，看看這裏http://jsfiddle.net/mp3aggv2/1/

只需使用一個標誌，無功即加1，並檢查它是否是奇數甚至，並根據它是否是奇數還是偶數，將交替的onclick文爲您提供：

var readMore = "<span class='readMore'>read about the solution...</span>"; 
var readLess = "<span class='readLess'>hide full description...</span>"; 

//".toggleExcerpt" is an empty <button> in the HTML 

var flag = 0; 

$(".toggleExcerpt").append(readMore); 

$(".toggleExcerpt") 
    .on("click", function (event) { 
     if (flag % 2 == 0) { 
      $(this).contents(".readMore") 
       .replaceWith(readLess); 
      console.log("readMore ran"); 
     } else { 
      $(this).contents(".readLess") 
       .replaceWith(readMore); 
      console.log("readLess ran"); 
     } 
     flag++; 
    }) 

Answer 3

選中此JSFiddle ：

var readMore = "read about the solution..."; 
var readLess = "hide full description..."; 
var excerptState = true; 
//".toggleExcerpt" is an empty <button> in the HTML 

$(".toogleExcerpt").html(readMore); 

$(".toogleExcerpt").click(function() { 

    $(this).html(excerptState ? readLess : readMore); 

    // invert state 
    excerptState = !excerptState 
}); 

Answer 4

要檢查班級是否存在，您必須使用.hasClass()。如果發現class，使用.remove()移除元素和.append()添加另一個。

例如，你可以試試這個代碼：

var readMore = "<span class='readMore'>read about the solution...</span>"; 
var readLess = "<span class='readLess'>hide full description...</span>"; 

//".toggleExcerpt" is an empty <button> in the HTML 

$(".toggleExcerpt").append(readMore); 

$(".toggleExcerpt") 
    .on("click", function (event) { 
     if($(this).find('span').hasClass('readmore') === true){ 
      $(this).find('span.readmore').remove(); 
      $(this).append(readLess); 
     }else{ 
      $(this).find('span.readLess').remove(); 
      $(this).append(readMore); 
     } 
    })