javascript - 对一个类而不是所有具有相同名称的类执行操作/功能

Question

请注意:此问题已移至此处: Load More / Show Less issues using jquery 并已得到答复。感谢所有提供帮助的人!如果两个答案都是正确的(比如部分正确答案)，我希望有一种方法可以将答案标记为正确，因为这最初是一个由两部分组成的问题。再次感谢您的帮助，以及在我们找到答案后理解有效的方法!

几个问题已经得到解决和修复，但现在遇到了一些其他问题...请参阅上面的链接。我要感谢大家迄今为止的帮助!

我不太确定该如何表达，但我会尽力而为。首先，我花了大约 5 个小时来让它工作；尝试针对在 stackoverflow 上有些相似的其他问题建议(或提供)的大量不同方法，以及像疯子一样搜索谷歌……但似乎没有任何效果。

问题: 我如何才能只对一个类执行操作/调用/函数，而不是对具有相同类名的所有类执行操作/调用/函数？

这个问题可能看起来很容易回答，但根据我的设置，它实际上可能非常令人沮丧(或者至少对我来说是这样)......请记住，我还是一个相对较新的人javascript 和 jquery...

这是我所拥有的 - 请注意，下面提供的 jQuery/JS 和 HTML 是一个非常简化的版本...

就目前而言，事情也按照我希望的方式进行，我遇到的唯一问题是如何仅“选择”一个类来执行下面需要的内容，而不是将其全部应用到所有类相同的类名...

jQuery/JS:

size_item = $(".container_item").size();
x=4;
$('.container_item:lt('+x+')').show();
$('.view_more').click(function (e) {
    e.preventDefault();
    x= (x+4 <= size_item) ? x+4 : size_item;
    $('.container_item:lt('+x+')').slideDown();
    $('.show_less').fadeIn('slow');
    if(x == size_item) {
        $('.view_more').fadeOut('slow');
    }
});
$('.show_less').click(function (e) {
    e.preventDefault();
    x=(x-4<4) ? 4 : x-4;
    $('.container_item').not(':lt('+x+')').slideUp();
    $('.view_more').fadeIn('slow');
    if(x == 4) {
        $('.show_less').fadeOut('slow');
    }
});

HTML:

<div class="wrapper">
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
</div>

这是一个jsFiddle用于演示目的。

非常感谢对此的任何帮助。

更新:匹配 fiddle 。我仍然有一些问题。现在，“加载更多”按钮不会像以前那样消失，我拥有的其他类(class)在我单击“加载更多”链接之前不会显示任何内容 - 它应该在每个开始时显示 4 个元素这是为第一个做的。有什么想法吗？

size_item = $(".resume_container_item").size();
x=4;
$('.resume_container_item:lt('+x+')').show();
    $('.resume_view_more').click(function (e) {
        e.preventDefault();
        var $parent = $(this).parent();
        x= (x+4 <= size_item) ? x+4 : size_item;
        $parent.find('.resume_container_item:lt('+x+')').slideDown();
        $('.resume_show_less').fadeIn('slow');
        if(x == size_item) {
            $('.resume_view_more').fadeOut('slow');
        }
    });
    $('.resume_show_less').click(function (e) {
        e.preventDefault();
        var $parent = $(this).parent();
        x=(x-4<4) ? 4 : x-4;
        $parent.find('.resume_container_item').not(':lt('+x+')').slideUp();
        $('.resume_view_more').fadeIn('slow');
        if(x == 4) {
            $('.resume_show_less').fadeOut('slow');
        }
    });

已更新 Fiddle

Answer 1

您想要的是在“查看更多”链接的父元素中搜索类:$(this).parent().find('.show-less')。

https://jsfiddle.net/456rosg1/