Question

我想要完成的是“喜欢”

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

但由于它已被弃用，我不知道使用什么替代品。我尝试在.on中使用if / else（“click”，function（）...但似乎没有用。 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

检查JSFiddle：

factorA

Answer 3

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

Answer 4

我认为我为您创建了一个解决方案，请在此处查看http://jsfiddle.net/mp3aggv2/1/

只需使用一个递增1的标志var，并检查它是奇数还是偶数，并根据它是否为奇数或偶数它将为您点击文本：

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

jQuery .click（）/。on（“click”...）我需要帮助在备用点击上交换文本

4 个答案: