изменить значение переменной вне функции

Question

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

исходный html <span> установлен как 3 с использованием jquery, но при наведении курсора на .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());
});

1004 *

Индекс элемента hovered-over .innerdiv размещается как HTML-код любого элемента <span>.

Вот демоверсия: http://jsfiddle.net/eEUeT/14/