Question

我是jQuery的新手，我正在尝试编写一个简单的脚本，当一个＆＃34;显示更多＆＃34;单击链接。

目前，我可以更改＆＃34;显示更多＆＃34;之间的链接文字。并且＆＃34;显示较少＆＃34;，但我仍然无法切换两个css类。第一个类隐藏了选择的内容，第二个类应该显示它。

以下是目前的代码：

CSS

.hideThis{
display:none;
}
.showThis{
display:inline;
}

HTML

<div class="review">
                                <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque 
                                sagittis velit, varius commodo odio accumsan ut. Etiam vestibulum commodo viverra. 
                                Integer condimentum quis ligula eget interdum. Vivamus semper posuere sapien ut tristique
                                <span class="hideThis">Etiam vestibulum commodo viverra. 
                                Integer condimentum quis ligula eget interdum. Vivamus semper posuere sapien</span>
                                <a href="#" class="showMoreText">... show more</a>
                                </p>
                            </div>

Jquery

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

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

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

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

    });

编辑：

添加JSFiddle 如何将此应用于具有多个＆＃34; showMoreContent＆＃34;的页面？链接？

由于

克里斯

Answer 1

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

http://jsfiddle.net/JRjaQ/

Answer 2

在您的情况下，您需要这样做：http://jsfiddle.net/k2n7Z/1/

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

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

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

.toggleClass切换到类并删除/添加元素当前具有/不具有的元素。

此外，我为你的跨度添加了一个id。要按删除/添加的类来标识元素是不好的做法。

Answer 3

你走在正确的轨道上。

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

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

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

进一步阅读toggleClass（）：http://api.jquery.com/toggleClass/

玩得开心！

Answer 4

您可以使用下面的代码最小化代码，

$('.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');

});

检查this jsfiddle是否有修改过的css和js。希望这会对你有所帮助。

Answer 5

试试This，这对您有所帮助。

$('.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');
        }

    });

Answer 6

您需要像这样更改脚本

$('.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');
    }

});

这是示例

http://jsfiddle.net/QSRxn/

无法使用jQuery toggleClass

6 个答案: