Question

有人可以在第一个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');
    });
});

Answer 1

this指的是当前对象。

在第一个版本中，

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

在第二版中，

this是由$('#v-nav>div.tab-content')

选择的DOM对象

如果要保留先前的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');
    });
});

Answer 2

在动画的回调函数中，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");
});

Answer 3

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

var self = this;

在功能上失去变量

3 个答案: