代码之家 › 专栏 › 技术社区 › Mevia

如何在jquery函数中存储变量值以供全局使用

function jquery javascript

Mevia · 技术社区 · 11 年前

我正在建立我们公司的简单广告网站,但由于我有问题,我决定询问专业人士。

我想对某些元素进行动画化,首先是单击时的ive witten功能,它做了很多事情,有两个阶段:active=0(开始)和active=1(中间)。活动0是指当您可以看到所有元素并且可以单击其中一个元素时,当您这样做时,它会执行一些动画链并转到活动1,当您看到单个元素的增强版本并且其他元素消失时,当再次单击它时,它将返回到起始位置并恢复活动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;
}
});

这是我写的鼠标输入/离开代码:

    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
};

不知道怎么做,提前感谢你的帮助:)

这是脚本的Fiddle: http://jsfiddle.net/UvtJZ/

正如您所看到的,即使当您单击框并使其增长时,状态也会在单击功能中更改1,悬停功能仍允许您在其上交换颜色

1 回复 | 直到 11 年前

Maddy 11 年前

对于这种特殊情况,您可以使用 $.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/