javascript - jQuery .click()/.on ("click"...) 我需要帮助在交替点击时交换文本

Question

我想要完成的是“类似”的东西

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

但由于它已被弃用，我不知道该使用什么替代方案。我尝试在 .on("click", 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

要检查类是否存在，您必须使用 .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);
        }
    })