Question

如何从'click'函数中定位$ this（来自'each'上下文）。我想删除尴尬的.parents（）。find（）代码。

$('.layout.responsive').each(function () {
    $('.area.optional', this).before('<a href="#" class="toggle_responsive" onClick="return false">Show details</p>').hide();
    $('.toggle_responsive', this).click(function () {
        $(this).parents('.layout.responsive').find('.area.optional').toggle();
    });
});

Answer 1

将其保存在命名（非特殊）变量中：

$('.layout.responsive').each(function () {
    var area = $('.area.optional', this).before('<a href="#" class="toggle_responsive" onClick="return false">Show details</p>').hide();
    $('.toggle_responsive', this).click(function () {
        $(area).toggle();
    });
});

Answer 2

您只需将其存储在变量中：

$('.layout.responsive').each(function () {
    var $elem = $('.area.optional', this).before('<a href="#" class="toggle_responsive">Show details</p>').hide();
    $('.toggle_responsive', this).click(function(e) {
        e.preventDefault();
        $elem.toggle();
    });
});

另请注意e.preventDefault();调用，这与onclick="return false;"所做的几乎相同，但更清晰。

Answer 3

解决方案当然和其他人一样，但我认为使用这种语法更加清晰，并且会像你现在使用的代码一样完成。

$('.layout.responsive').each(function () {
    var ar = $(this).find('.area.optional').hide(), 
        showDetail = $('<a />', {
        href: '#', 
        class: 'toggle_responsive', 
        text: 'Show details',
        click: function(){
            ar.toggle();
            return false;
        }}).insertBefore(ar);
});

我们可以使用jQuery 1.4中引入的新语法，而不是插入HTML字符串，而不是使用现在正在使用的凌乱的内联事件处理程序。

定位前一个$ this

3 个答案: