使用jquery显示/隐藏与类相关的文本

Question

我正在显示产品列表。单击show more后，需要显示extras类中的文本，需要隐藏节目并显示更少的需要。当点击显示较少时，需要发生相反的情况。

我使用下面的jQuery代码并且它可以工作，但问题是它显示/隐藏在每个块中添加额外的文本。我希望它只显示相关的块。

的Javascript

$(document).ready(function() {

    $('.extras').css("display", "none");

    $('.showmore').click(function() {
        $(".extras").toggle();
        $('.showmore').hide();
        $('.less').show();
    });

    $('.less').click(function() {
        $(".extras").toggle();
        $('.extras').hide();
        $('.showmore').show()
    });

});

HTML

<div class="blocks">
    <div class="right">
        <ul class="options">
            <li class="x"><a href="#">Service 1</a></li>
            <li class="y"><a href="#">Service 2</a></li>
            <li class="z"><a href="#">Service 3</a></li>
            <li class="r"><a href="#">Service 4</a></li>
            <li class="k"><a href="#">Service 5</a></li>
        </ul>
        <div class="showmore"><a>+ show more</a></div>
    </div>
    <div class="extras">
        <p>test text</p>
        <div class="less"><a>- hide</a></div>
    </div>
</div>

<div class="blocks">
    <div class="right">
        <ul class="options">
            <li class="x"><a href="#">Service 1</a></li>
            <li class="y"><a href="#">Service 2</a></li>
            <li class="z"><a href="#">Service 3</a></li>
            <li class="r"><a href="#">Service 4</a></li>
            <li class="k"><a href="#">Service 5</a></li>
        </ul>
        <div class="showmore"><a>+ show more</a></div>
    </div>
    <div class="extras">
        <p>test text</p>
        <div class="less"><a>- hide</a></div>
    </div>
</div>

<div class="blocks">
    <div class="right">
        <ul class="options">
            <li class="x"><a href="#">Service 1</a></li>
            <li class="y"><a href="#">Service 2</a></li>
            <li class="z"><a href="#">Service 3</a></li>
            <li class="r"><a href="#">Service 4</a></li>
            <li class="k"><a href="#">Service 5</a></li>
        </ul>
        <div class="showmore"><a>+ show more</a></div>
    </div>
    <div class="extras">
        <p>test text</p>
        <div class="less"><a>- hide</a></div>
    </div>
</div>

任何帮助将不胜感激。

Answer 1

确保在相关章节中执行逻辑。的 Demo Here

尝试：

        $(document).ready(function () {

            $('.extras').css("display","none");

            $('.showmore').click(function () {
                var parent = $(this).closest('.blocks');
                $(parent).find(".extras").toggle();
                $(parent).find('.less').show();
                $(this).hide();
            });

            $('.less').click(function () {
                var parent = $(this).closest('.blocks');
                $(parent).find(".extras").toggle();                 
                $(parent).find('.showmore').show();
                $(this).hide();
            });

        });

Answer 2

使用.closest()

$(document).ready(function() {

    $('.extras').css("display", "none");

    $('.showmore').click(function() {
        var $div = $(this).closest('.blocks');
        $div.find(".extras").toggle();
        $div.find('.showmore').hide();
        $div.find('.less').show();
    });

    $('.less').click(function() {
        var $div = $(this).closest('.blocks');
        $div.find(".extras").toggle();
        $div.find(".extras").hide();
        $div.find('.showmore').show();
    });

});​

<强> Check Fiddle

Answer 3

尝试在事件处理程序中使用$(this).toggle()。

或者我想更完整，$（'。extras'）。hide（）; $（本）.show（）;

Answer 4

使用$(this)获取相关内容

所以在$(".showmore").click()内，

$(this).parents(".blocks").children(".extras").toggle();
$(this).parents(".blocks").children('.showmore').hide();
$(this).parents(".blocks").children('.less').show();

Test Link

Answer 5

您可以将closest，find和toggle合并到一起工作 因此，您的所有javascript都可以更改为以下内容。

$('.showmore, .less').click(function() {
    var $elements = $(this).closest('.blocks').find('.extras, .showmore');
    $elements.toggle();
});

demo

参考

• Closest
• Find
• Toggle