javascript - Jquery/Javascript - 变量正在获取另一个变量值

Question

这是我的 fiddle :http://jsfiddle.net/wr1k02ym/3/

忽略那里的文本框，文本框应该只在您双击文本时显示，但由于某种原因它显示在 fiddle 中(它在我的主程序中工作正常，所以我猜它是一个 CSS 问题。

基本上，我正在显示一些文本，如果跨度中的文本如下所示:

<span class="output" title="lalalalalblas asdl sda lasdl asdb">lalalalalblas asdl...</span>

如果文本太长，则仅显示文本的一部分，然后将鼠标悬停在其上会显示标题中的全文。

在我的 Javascript 中，我像这样进行切换:

var tip;
var orig;
var switched = 0;
$('.output').hover(
    function () {
        tip = $(this).attr('title');
        orig = $(this).text();

        if (tip != orig) {
            $(this).fadeOut(function () {
                $(this).text(tip).fadeIn();
                switched = 1;
            });
        }
    },
    function () {
        if (switched == 1) {
            $(this).fadeOut(function () {
                $(this).text(orig).fadeIn();
                switched = 0;
                orig = "";
            });
        }
    });
});

正如你所看到的，我的 JS 非常简单，但是当你将鼠标从下面的文本移到上面的文本上时，问题就出现了(去我的 fiddle 测试)......然后由于某种原因，该变量正在获取另一个变量的值。

如何让它工作，以便它不接受其他变量文本？

Answer 1

您的 tip、orig 和 switched 变量在处理函数之间共享，从而在所有元素之间共享。您可以为每个元素创建变量，如下所示:

$('.output').each(function() {
    var tip;
    var orig;
    var switched = 0;

    $(this).hover(function () {
        tip = $(this).attr('title');
        orig = $(this).text();
        if (tip != orig) {
            $(this).fadeOut(function () {
                $(this).text(tip).fadeIn();
                switched = 1;
            });
        }
    }, function () {
        if (switched == 1) {
            $(this).fadeOut(function () {
                $(this).text(orig).fadeIn();
                switched = 0;
                orig = "";
            });
        }
    });
});

现在，每个输出元素都会有一个 tip、orig 和 switched。

fiddle : http://jsfiddle.net/wr1k02ym/4/