jquery - jQuery 中的特定选择器

Question

我正在学习 jQuery，并陷入了选择器的问题。

我有一个隐藏和显示元素的函数，但我试图将其精确地应用于元素点击而不是所有元素。

我尝试使用 $(this) 但我想我不够具体。

这是jsFiddle

这就是函数

jQuery

$(document).ready(function(){

    if($('.resume').text().length > 100)
    {
        complet = $('.resume').text();
        complet += '<span class="showLess"> Cacher</span>';
        html = $('.resume').text().slice(0,100);
        html += '<span class="showMore">...</span>';
        $('.resume').html(html);
    }

    $(document).on('click','.showMore', function(){
        $('.resume').html(complet);
        showLess();
    });

    function showLess(){
    $('.showLess').on('click', function() {
        $('.resume').html(html);
    });
    }

});

如果有人可以指示我该去哪里？最接近？

Answer 1

这里有多个问题......

1. 您需要分别查找每个简历元素的内容
2. 可以使用事件委托(delegate)添加 show less 处理程序

所以

/* Maël check : Marche presque */
jQuery(function () {
    $('.resume').each(function () {
        var text = $(this).text();
        if (text.length > 100) {
            var less = text.slice(0, 100) + '<span class="showMore">...</span>';
            $(this).html(less);

            $(this).data('content', text + '<span class="showLess"> Cacher</span>')
            $(this).data('less', less)
        }
    });

    $(document).on('click', '.showMore', function () {
        var $res= $(this).closest('.resume');
        $res.html($res.data('content'));
    });
    $(document).on('click', '.showLess', function () {
        var $res= $(this).closest('.resume');
        $res.html($res.data('less'));
    });
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-4">
    <div class="resume">Bonjour je suis un gros Chat. Bonjour je suis un gros Chat. Bonjour je suis un gros Chat Bonjour je suis un gros Chat Bonjour je suis un gros Chat Bonjour je suis un gros Chat Bonjour je suis un gros Chat Bonjour je suis un gros Chat</div>
</div>
<div class="col-xs-4">
    <div class="resume">Cette fois ci un poisson ! Cette fois ci un poisson ! Cette fois ci un poisson ! Cette fois ci un poisson ! Cette fois ci un poisson !</div>
</div>