无法使用jQuery切换类

我是jQuery的新手，我正在尝试编写一个简单的脚本，在单击ShowMore链接时显示更多文本

目前我可以在show more和show less之间更改链接文本，但我仍然无法切换这两个css类。第一个类隐藏选择的内容，第二个类应该显示它

以下是迄今为止的代码：

css

html

编辑：

添加了一个 如何将此应用于具有多个ShowMore内容链接的页面

谢谢

---

克里斯

在你的情况下，你需要这样做：

.toggleClass切换到类并删除/添加元素当前拥有/未拥有的类

此外，我在您的span中添加了一个id。按移除/添加的类标识元素是一种不好的做法

$('.showMoreText').on('click', function(event) {
    // event.preventDefault();
    $(this).text(function(_, txt) {
        return txt === '... show less' 
               ? '... show more' 
               : '... show less';
    }).prev('.hideThis').toggle();
});

试试看，这对你很有帮助

$('.showMoreText').click(function(){
        var text = $(this).html();
        if(text == '... show more'){

            $('.hideThis').removeClass('hideThis').addClass('showThis');
            $(this).html('... show less');

        }else {
            $('.showThis').removeClass('showThis').addClass('hideThis');
            $(this).html('... show more');
        }

    });

---

您需要像这样更改脚本

$('.showMoreText').click(function(){

    var text = $(this).html();

    if(text == '... show more'){

        $('.hideThis').toggleClass('showThis');
        $(this).html('... show less');

    }else {
        $('.hideThis').toggleClass('showThis');
        $(this).html('... show more');
    }

});

这是一个例子

---

你在正确的轨道上

请注意，使用toggleClass时，不会替换分配给匹配元素的所有类名。因此，在使用时：

<span class="hideThis">blah blah</span>

$('.hideThis').toggleClass('showThis');

如果在同一页面上显示多个评论，那么使用类名作为jQuery标识符将导致用户在单击任何“阅读更多”链接时显示页面上的所有隐藏文本。在这种情况下，尝试在html标记上使用id

关于切换类问题的进一步阅读：

---

玩得开心

您可以使用以下方法将代码最小化一点

$('.showMoreText').click(function(){

    var text = $(this).html();
    $(this).toggleClass('active');
    $('.showMoreSpan').toggleClass('hideThis');
    if($(this).hasClass('active'))
        $(this).html('...show less');
    else
        $(this).html('...show more');

});

---

检查修改后的css和js。希望这对您有所帮助。

如果您多次使用$this.prev'.hideThis'，@Brewal是的，这也比查询整个DOM更有效，谢谢。谢谢未定义。如何更改它，使其在一个页面上与多个实例一起工作。所以它只影响它应用于的文本？@crm不客气，更新的代码适用于多个实例。谢谢，当有多个隐藏内容的评论时，我如何应用它。此时，它打开了所有隐藏单词的单独文本。

$('.showMoreText').click(function(){
        var text = $(this).html();
        if(text == '... show more'){

            $('.hideThis').removeClass('hideThis').addClass('showThis');
            $(this).html('... show less');

        }else {
            $('.showThis').removeClass('showThis').addClass('hideThis');
            $(this).html('... show more');
        }

    });

$('.showMoreText').click(function(){

    var text = $(this).html();

    if(text == '... show more'){

        $('.hideThis').toggleClass('showThis');
        $(this).html('... show less');

    }else {
        $('.hideThis').toggleClass('showThis');
        $(this).html('... show more');
    }

});

<span class="hideThis">blah blah</span>

$('.hideThis').toggleClass('showThis');

<span class="hideThis showThis">blah blah</span>

<span class="readMore hideThis">blah blah</span>

// This should both hide and show the span on each click
$('.readMore').toggleClass('hideThis');
$('.readMore').toggleClass('showThis');

$('.readMore').hide();
$('.readMore').show();

$('.showMoreText').click(function(){

    var text = $(this).html();
    $(this).toggleClass('active');
    $('.showMoreSpan').toggleClass('hideThis');
    if($(this).hasClass('active'))
        $(this).html('...show less');
    else
        $(this).html('...show more');

});