使用jQuery的变量，这样一个函数执行多个任务

我是一个真正的小白和每次我试图执行这些事情，它只是完全停止工作时间......使用jQuery的变量，这样一个函数执行多个任务

我有我的网页上4盒它们应该沿着小蓝色标签所面对的方向展开和收缩。

我想知道的事情，我试图实现，但只是不知道，是否有一种方法，我可以输入一些变量，所以相同的功能可以由其他盒子执行，但在不同的方向...

.exp1需要更换所以用值1-4个变量超出代替取决于数

例如/ .EXP（可变值从1到4）

的其值为.exp时，其他类变量数需要在代码中进一步更改下去

例如/ .box3将需要.box（变量值从1到4） .miniBox3将是.miniBox（从1到4的变量值）并且最后.con1将是.con（变量值从1 4）

值和属性动画也需要改变如/的

而不是.animate（{底......它可能是.animate（{左...一个新的VA ; lue像30px而不是10px

在expandFunction（）中的规则是：

如果它是.exp1 ...那么.box3关闭替换为.miniBox3，.box1展开并且.exp1切换为.con1

如果它是.exp2 ...则.box1关闭替换为.miniBox1，.box2扩大和.exp2切换到.con2

，如果它是.exp3 ......然后.box4关闭由.miniBox4取代，.box3扩大和.exp3切换到.con3

，如果它是.exp4 .. .box2关闭取代.miniBox2，.box4展开和.exp4切换到.con4

在contractFunction（）.box，.exp和.con数字都是相同的。

下面的代码：

$(document).ready(function() { 

//function declared expand 
$('.exp1').click(function(){ 
expandFunction(); 
}); 
}); 

//expand function properties 
    function expandFunction(){ 
     if($(".box3").is(":visible")) 
     { 
     $('.box3').animate({left:'100%', top:'70px', width:'0px', height:'0px'}, 
     "slow", function(){ 
      $(this).switchClass("box3", "miniBox3", "slow"); 
      $('.exp3').hide();$('.miniBox3').show("fast");//hide blue bar, show box in sidebar 

         $('.box1').animate({bottom:'10px'}, "slow", function(){ //opens box right 
       $('.exp1').unbind('click').removeClass('exp1').addClass('con1') 
          .click(function(){ 
          contractFunction(); 
          }); 
          }); 
     }); 
     } 
     else 
          { 
     $('.box1').animate({bottom:'10px'}, "slow", function(){ //opens box right 
      $('.exp1').unbind('click').removeClass('exp1').addClass('con1') 
         .click(function(){ 
         contractFunction(); 
         }); 
    }); 
    } 
} 
//}; 

function contractFunction(){ 
    $('.box1').animate({bottom:'46.5%'}, "slow", function(){ 
     $('.box1 div').unbind('click').removeClass('con1').addClass('exp1').click(function(){ 
      expandFunction(); 
     }); 
    }); 
}

这里有一个fiddle

（我的第一个问题是，第一盒（左上）扩大一次，合同一旦再不做了。它应该不断扩大和收缩到无限。解决如果其他语句）

非常感谢您提前任何poi并帮助你可以给我。

来源

2014-02-27 patwick600akabob

in contractFunction您没有重新定位.box3，因此您第二次尝试设置动画时没有任何操作，因此回调不会触发。 .box3不存在，现在是.minibox3 !!!! –

好吧，我试着在expandFunction中放入一个if else语句，但它没有奏效。我的想法是，如果.box3显示，然后执行功能直到显示.miniBox3，否则做其他事情... 我将如何实现你所说的？ @crisim il numenoreano – patwick600akabob

不，对不起，忘了括号！修复！ :) http://jsfiddle.net/y6EQW/3/ 现在我将如何实现变量？ – patwick600akabob

我已更新您的fiddle只有几件事情。

我摆脱了div.miniBox，我认为他们没有必要满足您的需求。
我重写了你使用的CSS类，所以我可以执行动画只是添加和删除classNames，每个盒子现在有一个唯一的ID。
我加到触发器的div一个DATA-属性（感谢HTML5）来存储相关框隐藏/显示的ID，所以我可以retrive容易与jQuery.data()函数值。

这里HTML的样本

<div id="a1" class="box"> 
    <div class="exp" data-related="a3"></div> 
    1 
</div>

，在这里我用

$(function() { 
    $('.exp').click(function() { 
    var exp = $(this);       //this is the clicked trigger 
    var parent = exp.parent();     //this is the parent box 
    var related = $('#' + exp.data('related')); //this is the related box 

    if (exp.is('.con')) { // check if the box is expanded 
          // i can do the same with parent.is('.maxi') 
     //expanded 
     parent.removeClass('maxi' /* shrink the box */, 
         'slow', 
          function() { 
     exp.removeClass('con'); //now i know the parent box is no more expanded 
     related.removeClass('mini', 'slow'); //restore the related box 
     }); 
    } else { 
     //collapsed 
     related.addClass('mini' /* minimize the related box */, 
         'slow', 
         function() { 
     exp.addClass('con'); //this to know if parent is expanded 
     parent.addClass('maxi', 'slow'); //expand the parent box 
     }); 
    } 
    }); 
});

你可以在这个fiddle

编辑检查的完整代码的代码：现在可以回答你的问题（如何与变量做到这一点）我说你可以使用你的元素的状态作为自己的变量。

来源

2014-02-27 22:49:29

使用jQuery的变量，这样一个函数执行多个任务

回答

相关问题