为什么我不能使用$(this)jQuery选择器

时间:2018-04-08 15:33:39

标签: javascript jquery this

我的问题是为什么我不能使用$(this)jQuery选择器在ajax加载的内容这里是我的代码:

$('.commentsDiv').css({'opacity': '0'});
        var loadTheComments = $('.commentsDiv').load($homeUrl+'trailer-comments/'+$trailerID,function(){
            $('.targetDiv').hide();
            $('.showSingle').click(function(e){
                e.preventDefault();
                $('#div'+$(this).attr('target')).slideToggle();
            });

            var commentsReplyLink = $('.commentReplyLink');
            commentsReplyLink.click((e)=>{
                e.preventDefault();
                commentsReplyLink.each(()=>{
                    var $self = $(this);
                    var $addedBy = $self.attr('data-value');
                    var $commentID = $self.attr('data-id');


                    $('html,body').animate({
                        scrollTop: $(".post-comment-form").offset().top},
                        'slow');

                    $('#commentReplyDiv').css({
                        display: 'block',
                    });

                    console.log('added by: '+$addedBy+' comment id: '+$commentID);

                    $('#replyToCommentInput').val($addedBy);
                    $('#replyToCommentInput').attr('comment-id', $commentID);
                });
            });
        }).animate({opacity:'1'}, 3500, () => {});

我试图从看起来像这样的超链接中获取comment-id属性:

<a class="commentReplyLink" data-id="14" data-value="Reply to #14" href=""><em>Reply</em></a>

但是当点击该超级链接时,我在Console.log()..:

中获取此信息
added by: undefined comment id: undefined

2 个答案:

答案 0 :(得分:0)

这是因为你对.each()回调使用了“箭头函数”,箭头函数没有绑定this标识符,所以它使用的是外部作用域中定义的最近的标识符。

而是使用函数参数。

commentsReplyLink.each((i, link)=>{
    var $self = $(link);

虽然看起来好像你只想点击一下。如果是这样,您不需要循环。使用事件对象的.currentTarget属性。

$('.commentReplyLink').click((e)=>{
    e.preventDefault();
    var $self = $(e.currentTarget);
    var $addedBy = $self.attr('data-value');
    var $commentID = $self.attr('data-id');


    $('html,body').animate({
        scrollTop: $(".post-comment-form").offset().top},
        'slow');

    $('#commentReplyDiv').css({
        display: 'block',
    });

    console.log('added by: '+$addedBy+' comment id: '+$commentID);

    $('#replyToCommentInput').val($addedBy);
    $('#replyToCommentInput').attr('comment-id', $commentID);
});

答案 1 :(得分:0)

来自我正在使用的功能。我必须使用普通功能,它工作正常,感谢帮助人员。

$(this)无法使用该功能()=>{}