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