如何在全球使用的jquery函數中存儲變量的值

Question

我建立了我們公司的簡單廣告網站，但由於我有問題，我決定問專業人士。

我想動畫某些元素，並在開始時witten功能點擊做了很多事情，並且有兩個階段：active = 0（start）和active = 1（middle）。活動0是當你看到所有的元素，你可以點擊一個，當你做 - 它做一些動畫鏈，當你看到單一元素的加密版本，其他人不見了時，當你再次點擊它時，它會進入活動狀態1回到起始位置和Reactive活動0.

問題是我想也添加mouseenter和mouseleave方面，但我只希望它發生時，所有元素都是積極的0，但它不起作用，所以我想我需要一些可用於全局函數的活動階段的處理程序，但不知道如何執行此操作。

這是我的點擊功能：

var active = 0; 
$(".item").on("click", function() { 
    var checkDiv = $(this); 
    var idDiv = checkDiv.attr("id"); 

if($("#"+idDiv).is(':animated')){ 
    return false; 
} 

if(active == 0) { 
    $(".item").each(function() { 
    if (idDiv != this.id) { 
     $("#"+this.id).css({"z-index": "50"}); 
     $("#"+this.id).fadeOut(500); 
    } 
    }); 

    $("#"+idDiv).css({"z-index": "100"}); 

    var horizontal_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right"; 
    var vertical_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom"; 
    var properties_stage1 = {}; 
    properties_stage1[horizontal_stage1] = 300; 
    properties_stage1[vertical_stage1] = 100; 

    $("#"+idDiv).animate(properties_stage1, 500); 

    var horizontal_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right"; 
    var vertical_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom"; 
    var properties_stage2 = {}; 
    properties_stage2[horizontal_stage2] = 200; 
    properties_stage2[vertical_stage2] = 0; 
    properties_stage2['width'] = 400; 
    properties_stage2['height'] = 400; 

    $("#"+idDiv).animate(properties_stage2, 500, function() { 
    active = 1; 
    }); 
} 

if(active == 1) { 
    var horizontal_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right"; 
    var vertical_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom"; 
    var properties_stage2 = {}; 
    properties_stage2[horizontal_stage2] = 310; 
    properties_stage2[vertical_stage2] = 110; 
    properties_stage2['width'] = 180; 
    properties_stage2['height'] = 180; 

    $("#"+idDiv).animate(properties_stage2, 500); 

    var horizontal_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right"; 
    var vertical_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom"; 
    var properties_stage1 = {}; 
    properties_stage1[horizontal_stage1] = (idDiv == 'item_1' || idDiv == 'item_4' || idDiv == 'item_5' || idDiv == 'item_8') ? 10 : 210; 
    properties_stage1[vertical_stage1] = 10; 

    $("#"+idDiv).animate(properties_stage1, 500); 

    $(".item").each(function() { 
    if (idDiv != this.id) { 
     $("#"+this.id).fadeIn(500); 
    } 
    }); 
    active = 0; 
} 
}); 

這是我的mouseenter /留給香港專業教育學院編寫的代碼：

if(active == 0) { //THIS IS NOT WORKING beacuse active is handled in other function (above) 
    $(".item").mouseenter(function() { 
    $(this).find("img").animate({ marginTop: '0px' }, 500); 
    }); 

    $(".item").mouseleave(function() { 
    $(this).find("img").animate({ marginTop: '-180px' }, 500); 
    }); 
    } 

所以現在爲了它的工作我想我需要一些類似的功能：

function is_active(store_active_stage, read_active_stage) { 
    if get store active stage than 
     var active = store_active_stage 
    if read active stage 
     return (previously stored) active 
}; 

不要有線索如​​何做到這一點的，謝謝你的幫助提前:)

這是工作小提琴的腳本： http://jsfiddle.net/UvtJZ/

，你可以看到甚至當您單擊框，它的增長，狀態1改變whithin點擊功能，懸停功能還允許您交換就可以了顏色

Answer 1

對於這種特殊的情況下，你可以使用$.data()

$(".item").on("click", function() { 
    var checkDiv = $(this); 
    var data = checkDiv.data(); 
    if(typeof data.active === 'undefined' || data.active == 0){ 
    // blah blah blah code   
    chheckDiv.data('active',1) 
    } 
    else if(data.active == 1){ 
    // blah blah blah code 
    chheckDiv.data('active',0); 
    } 

}).mouseenter(function() { 
var data = $(this).data(); 
if (typeof data.active === 'undefined' || data.active == 0) 
    $(this).css({"background": "blue"}); 
}).mouseleave(function() { 
    var data = $(this).data(); 
    if (typeof data.active === 'undefined' || data.active == 0) 
    $(this).css({"background": "red"}); 
}); 

檢查這個搗鼓工作一個http://jsfiddle.net/UvtJZ/2/