Question

所以我遇到了这个问题，我知道它可以很快解决但我不能到达那里。

我有以下HTML代码：

<section class="actualite">
                <div class="actualite-text">
<h3 class="title">Nam Libero tempore, cum soluta nobis est eligendi optio. </h3>
                    <div class="text-post">A</div>
                    <a class="lire btn btn-default">Lire</a>
                </div>
</section>

<section class="actualite">
                <div class="actualite2-bg"></div>
                <div class="actualite-text">    
<h3 class="title">Nam Libero tempore, cum soluta nobis est eligendi optio. </h3>  


                    <div class="text-post">B</div>
                    <a class="lire btn btn-default">Lire</a>
                </div>
</section>

<section class="actualite">
                <div class="actualite3-bg"></div>
                <div class="actualite-text">     
<h3 class="title">Nam Libero tempore, cum soluta nobis est eligendi optio. </h3>   


                    <div class="text-post">C</div>
                    <a class="lire btn btn-default">Lire</a>
                </div>
</section>

实际上我的代码在类.text-post中有很多文本，但它有overflow:hidden和固定高度来隐藏文本。我想要的是在单击按钮.lire时显示整个文本，但我希望它没有不同的类。我希望这些类保持同名。我个人可以轻松一点。

这是我的JQuery代码：

$('.lire').click(function () {
        var tx = $('.text-post'),
        curHeight = tx.height(),
        autoHeight = tx.css('height', 'auto').height();
        var boxheight = autoHeight + 120;
        tx.height(curHeight).animate({height: autoHeight}, 1000);
        $('.actualite-text').animate({height:boxheight}, 200);

});

这很有效。当我单击按钮时，div（.actualite-text和.text-post）会展开，但它们会在所有部分中展开，因为它们具有相同的c类。但我想用相同的类来做这件事，并且他们会单独扩展。我知道.parent()或.closest()会很容易，但我尝试过没有成功。

如果您不了解我的问题，请告诉我。我希望这不会让人感到困惑。

最好的问候。

Answer 1

您需要使用正确的选择器来定位同级.text-post和最近的.actualite-text：

兄弟姐妹.text-post

var tx = $(this).prev();

或

var tx = $(this).siblings('.text-post');

最接近的.actualite-text

$(this).closest('.actualite-text');

或

$(this).parent();

完整代码：

 $('.lire').click(function () {
    var tx = $(this).prev();
    curHeight = tx.height(),
    autoHeight = tx.css('height', 'auto').height();
    var boxheight = autoHeight + 120;
    tx.height(curHeight).animate({height: autoHeight}, 1000);
    $(this).closest('.actualite-text').animate({height:boxheight}, 200);
 });

Answer 2

您定位所有text-post，而不是定位相关text-post，请参阅下面的代码

$('.lire').click(function () {
        //get previous text-post
        var tx = $(this).prev('.text-post'),
        curHeight = tx.height(),
        autoHeight = tx.css('height', 'auto').height();
        var boxheight = autoHeight + 120;
        tx.height(curHeight).animate({height: autoHeight}, 1000);
        //get parent actualite-text
        $(this).closest('.actualite-text').animate({height:boxheight}, 200);

});

Answer 3

当我点击按钮时，div（.actualite-text和.text-post）都会展开，但是它们会扩展到所有部分，因为它们具有相同的c类

此处通常的解决方案是仅在该部分内工作，使用closest升级到第二级，然后find找到要更改的部分。在这种情况下，例如：

$('.lire').click(function () {
        // Get the section by finding it relative to the clicked "button"
        var section = $(this).closest(".actualite");

        // Work within it using `find`
        var tx = section.find('.text-post'),
        curHeight = tx.height(),
        autoHeight = tx.css('height', 'auto').height();
        var boxheight = autoHeight + 120;
        tx.height(curHeight).animate({height: autoHeight}, 1000);
        section.find('.actualite-text').animate({height:boxheight}, 200);

});

在该部分内工作是一项强大的技术，因为它不是脆弱的。例如，在您的情况下，.text-post是按钮的前一个兄弟，.actualite-text是其直接父级，因此理论上您可以使用prev（或siblings）和parent。但是如果你改变了HTML就会破坏，而如上所述你可以改变你想要的部分中的HTML ，只要你保留部分包装并且不要改变它班级名称。

JQuery同一个类不同的选择

3 个答案: