Question

我有这个HTML

<li>
    <a rel="1" href="/jobwall/job/1">
        <img src="http://lcl.moovjob.com/media/images/employers/simonainleydotinfo.jpg">
    </a>
</li>

我有这个javascript

$('ul#jobs li a').mouseenter(function(){
    $(this).parent().addClass('active');
    $.ajax({
        type: 'POST',
        url: '/jobwall/job_tooltip',
        data: 'employer_id='+$(this).attr('rel'),
        success:function(html) {
            $(this).parent($(this)).addClass('added');
        }
    });
}).mouseleave(function(){
    $('#wrapper').append('Leave');
});

在鼠标输入时，我想添加一个类，其中包含一个包含mouseenter事件的a，但是我无法在mouseenter上添加该类。

Answer 1

您有.addClass()两次来电。你在说哪一个？

第一个应该有效。

第二个不会，因为this回调内success:的值已发生变化。您可以将其缓存在变量中并在其中引用它。

$('ul#jobs li a').mouseenter(function(){

      // cache the parent here, because "this" will have different
      //    meaning in the callback
    var $parent = $(this).parent().addClass('active');
    $.ajax({
        type: 'POST',
        url: '/jobwall/job_tooltip',
        data: 'employer_id='+$(this).attr('rel'),
        success:function(html) {

             // Inside here, "this" no longer references the DOM element
            $parent.addClass('added'); // reference the parent you cached
        }
    });
}).mouseleave(function(){
    $('#wrapper').append('Leave');
});

另一种选择是设置AJAX调用的context:属性。

$.ajax({
    type: 'POST',
    context: this,  // set the context to the current "this" for the callback
    url: '/jobwall/job_tooltip',
    data: 'employer_id='+$(this).attr('rel'),
    success:function(html) {
        $(this).parent().addClass('added');
    }
});

另一种选择是use $.proxy()保留this的价值。

$.ajax({
    type: 'POST',
    url: '/jobwall/job_tooltip',
    data: 'employer_id='+$(this).attr('rel'),
    success: $.proxy( function(html) {      // Have $.proxy return a function 
        $(this).parent().addClass('added'); // with the proper "this"
    }, this )
});

Answer 2

你在成功事件的内部将是窗口而不是锚元素。在.ajax调用之外获取锚点的引用，并在成功事件中使用它。

 $('ul#jobs li a').mouseenter(function(){
    var $this = $(this);
    $this.parent().addClass('active');
    $.ajax({
        type: 'POST',
        url: '/jobwall/job_tooltip',
        data: 'employer_id='+$(this).attr('rel'),
        success:function(html) {
            $this.parent().addClass('added');
        }
    });
}).mouseleave(function(){
    $('#wrapper').append('Leave');
});

Answer 3

你错误地调用parent方法将其更改为

$(this).parent()

Answer 4

尝试

$(this).closest('li').addClass('added');

或者只是

$(this).parent().addClass('added');

jquery帮助选择父级

4 个答案: