0

I am fairly new to jQuery and I am attempting to write a simple script that will show more text when a "show more" link is clicked.

Currently I am able to change the link text between "show more" and "show less", but I am still unable to toggle the two css classes. The first class hides the select content and the second class should display it.

Here is the code so far:

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

    });

edit:

added a JSFiddle How can I apply this to a page with multiple "showMoreContent" links?

Thanks

Chris

4

6 回答 6

6 
$('.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/

于 2013-09-11T13:23:19.423 回答
1

在您的情况下，您需要这样做：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。通过删除/添加的类来识别元素是不好的做法。

于 2013-09-11T13:21:04.847 回答
1

你在正确的轨道上。

请注意，当使用 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/

玩得开心！

于 2013-09-11T13:34:06.980 回答
1

您可以使用如下所示将代码最小化，

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

});

检查此 jsfiddle以获取修改后的 css 和 js。希望这对您有所帮助。

于 2013-09-11T13:34:12.790 回答
0

你需要像这样更改脚本

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

于 2013-09-11T13:28:16.833 回答
0

试试看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');
        }

    });
于 2013-09-11T13:24:00.273 回答