在函數外部更改變量值

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。

---

並且我通過將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元素的索引.innerdiv為任何<span>元素的HTML。

這是一個演示： http : //jsfiddle.net/eEUeT/14/