javascript - 在函数外更改变量值

Question

$(".outerdiv .innerdiv").hover(function(){
    var variable = $(this).index();
});
var variable = 3;
$("span").html(variable);

<span>的原始html使用 jquery 设置为 3，但是当鼠标悬停在 .innerdiv 上时我希望它通过将函数外部的变量更改为特定 .innerdiv 的索引值来更改其索引值悬停在上面。 http://jsfiddle.net/eEUeT/9/

<div class="outerdiv">
    <div class="innerdiv">1</div>
    <div class="innerdiv">2</div>
    <div class="innerdiv">3</div>
    <div class="innerdiv">4</div>
    <div class="innerdiv">5</div>
</div>    
<span></span>​

我试过了http://jsfiddle.net/eEUeT/11/然而，这并没有设置原始值 3。

---

AND 我通过将 html 更改为 <span>3</span> 来理解并使用下面的 jquery 将起作用，但我宁愿按照我要求的方式学习如何做

$(".outerdiv .innerdiv").hover(function(){
    var variable = $(this).index();
$("span").html(variable);
});

Answer 1

如果你想操纵一个元素，你必须选择它......你不能给一个变量赋值并期望 DOM 元素更新自己。不过正如您所说，这样做很容易:

//set the initial HTML for the span element(s)
var $span = $('span').html(3);

$(".outerdiv .innerdiv").hover(function(){

    //update the span element(s) HTML to the index of the hovered-over `.innerdiv` element
    $span.html($(this).index());
});

这会放置悬停的索引 .innerdiv元素作为任何 <span> 的 HTML元素。

这是一个演示:http://jsfiddle.net/eEUeT/14/