使用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的變量，這樣一個函數執行多個任務

回答

相關問題