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. 可以使用事件委派
添加show less处理程序

所以

＆＃13;
＆＃13;
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io').listen(http);
var username;
var online_users = [];
var status = 'Disconnected';

app.get('', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  socket.on('user capture', function(data){
    socket.username = data.username;
    data.online_users.push(socket.username);
    data.status = 'Connected';
    io.emit('user capture', data);
    console.log(data);
  });
    socket.on('send', function(msg){
    sendData = {
      msg:msg,
      username:socket.username
    };
    io.sockets.emit('send', sendData);
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});
＆＃13;
/* 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'));
    });
});
＆＃13;
＆＃13;
＆＃13;

Answer 2

我会这样做的：

$('.resume').each(function() {
    var resume = $(this),
        text = resume.text();

    if (text.length > 100) {
        var showLess = '<span class="showLess"> Cacher</span>',
            showMore = '<span class="showMore">...</span>',
            sliced = text.slice(0, 100);

        resume.html(sliced + showMore);

        resume.on('click', '.showLess', function() {
            resume.html(sliced + showMore);
        }); 

        resume.on('click', '.showMore', function() {
            resume.html(text + showLess);
        });        
    }
});

Updated fiddle