0

有人可以告诉我为什么在第一个alert(items.index($(this))) = 1和第二个alert(items.index($(this))) = -1。这个值是如何在另一个函数中改变的？

$(function () {
var items = $('#v-nav>ul>li').each(function () {
    $(this).click(function () {
        //remove previous class and add it to clicked tab
        items.removeClass('current');
        $(this).addClass('current');

        alert(items.index($(this)));

        $('#v-nav>div.tab-content').fadeOut("slow", function () { 
        alert(items.index($(this)));
        $('#v-nav>div.tab-content').eq(items.index($(this))).fadeIn("slow");
        });


      //  window.location.hash = $(this).attr('tab');
    });
});
4

3 回答 3

3

this指当前对象。

在第一个版本中，

this是$('#v-nav>ul>li')列表项。

在第二个版本中，

this被选中的 DOM 对象$('#v-nav>div.tab-content')


如果要保留 的先前值this，则将其缓存在变量中。（缓存$(this)是一种非常好的做法，因为您总是保存函数调用）。

当您使用时，$(this)您实际上会传递this给$函数。

$(function () {
var items = $('#v-nav>ul>li').each(function () {
    var $this = $(this);
    $this.click(function () {
        //remove previous class and add it to clicked tab
        items.removeClass('current');
        $this.addClass('current');

        alert(items.index($this));

        $('#v-nav>div.tab-content').fadeOut("slow", function () { 
        alert(items.index($this));
        $('#v-nav>div.tab-content').eq(items.index($(this))).fadeIn("slow");
        });


      //  window.location.hash = $(this).attr('tab');
    });
});
于 2012-11-21T20:16:13.237 回答
1

在动画的回调函数里面，this不是你点击的元素，而是被动画的元素。

“回调没有发送任何参数，但这被设置为正在动画的 DOM 元素。”

http://api.jquery.com/fadeOut/

（如果它没有被设置为动画元素，它就是对window对象的引用。）

将引用复制到动画调用之外的变量：

var t = this;
$('#v-nav>div.tab-content').fadeOut("slow", function () { 
  alert(items.index($(t)));
  $('#v-nav>div.tab-content').eq(items.index($(t))).fadeIn("slow");
});
于 2012-11-21T20:17:25.007 回答
0

您必须考虑每个“this”的上下文，每个回调都有一个不同的“this”变量。如果您想保留原件，请执行以下操作：

var self = this;
于 2012-11-21T20:16:59.770 回答