Question

我有一个带有“post”类的div，其中有一堆文本，没有指定高度。

.post {
    width: 100%;
    margin: 0 0 2% 0;
    background-color: #AAA;
    overflow: hidden;
}

使用jQuery我想首先添加第二个类“postLess”，它指定高度为300px。因此隐藏了部分内容。

.postLess {
    height: 300px;
}

当点击“阅读更多”按钮时，我想删除“postLess”并添加“postMore”，以便将高度设置为“auto”并显示全文。

.postMore {
    height: auto;
}

然后当然我希望它删除类“postMore”并在第二次单击该按钮时添加类“postLess”。这是我的jQuery。我做错了什么？

    $('.post').addClass('postLess');
    $('.readMore').click(function() {
        if ($('.post').hasClass('postLess')) {
            $('.post').removeClass('postLess').addClass('postMore');
        }
        else if ($('.post').hasClass('postMore')) {
            $('.post').removeClass('postMore').addClass('postLess');
        }
    });

这是我的HTML的重要部分，直到前两个“.post”的

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Switchback</title>
        <link href="css/styles.css" type="text/css" rel="stylesheet">
        <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <header>
        </header>
        <div id="content">
            <div id="sidebar">
                <p>
                    Ut neque tellus, dapibus bibendum tempor quis, gravida vitae nisl.     Pellentesque erat elit, ullamcorper in accumsan id, ullamcorper in lectus. Nullam nec augue 
                </p>
                <p>
                    Nunc facilisis lacus vel enim fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae sem mauris. 
                </p>
            </div> <!-- end div id="sidebar" -->
            <div id="posts">
                <div class="post">
                    <div class="postImg" style="background-image: url('img/pic1.png');">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus lorem, viverra sed blandit non, vulputate in sem. Donec laoreet turpis id lectus 
                        <a href="javascript:;" class="readMore">read&nbsp;more&nbsp;&raquo;</a>
                    </p>
                </div>
                <div class="post">
                    <div class="postImg" style="background-image: url('img/pic2.png');">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec felis 
                    </p>
                    <p>
                        Sed ornare, velit ac dignissim lacinia, dui mauris suscipit enim, quis viverra metus elit id quam. Sed quis tellus nulla. Nam pulvinar ante at felis lobortis eleifend. 
                        <a href="#" class="readMore">read&nbsp;more&nbsp;&raquo;</a>
                    </p>
                </div>

Answer 1

如果元素以一个类开头，并且您想要删除该类并添加另一个类，反之亦然，只需使用toggleClass（）来切换这两个类，它应该为您完成工作： / p>

$('.readMore').on('click', function() {
    $('.post').toggleClass('postLess postMore');
});

如果有多个.post元素，则需要单独定位它们。

如果.post元素是.readMore元素的父元素，则可以使用nearest（）：

$('.readMore').on('click', function() {
    $(this).closest('.post').toggleClass('postLess postMore');
});

如果是孩子，您可以使用上下文：$('.post', this).toggleClass('postLess postMore');

Answer 2

这是一种更有效的方法，只需在关闭no if if语句时切换类

$('.post').addClass('postLess');
    $('.readMore').click(function() {
           $('.post').toggleClass('postLess postMore');
            return false;      
    });

此外，如果您的帖子更多按钮位于帖子div中，您可以执行以下操作。这意味着您可以独立运行post div的多个实例。

$('.post').addClass('postLess');
        $('.readMore').click(function() {
               $(this).parent().toggleClass('postLess postMore');
               return false;      
        });

Answer 3

您只需要在想要阅读的帖子中执行此操作，不要使用$('.post')，而是使用$(this).parents('.post')。

所以完整的解决方案是：

$('.readMore').on('click', function() {
    $(this).parents('.post').toggleClass('postLess postMore');
});

是否为wordpress博客？我非常喜欢这个想法，我可以尝试一下这个想法！

如何在javascript中的click函数中编写if else

3 个答案: