2016-09-29 8 views
1

我試圖減少我重複的代碼量。Javascript-動態變量循環

目前,我有以下:

var item1H = $(".item-1").height(); 
    var item1W = $(".item-1").height(); 
    $(".item-1 .text").css('margin-left', -item1W/2); 
    $(".item-1 .text").css('margin-bottom', -item1H/2); 

    var item2H = $(".item-2").height(); 
    var item2W = $(".item-2").height(); 
    $(".item-2 .text").css('margin-left', -item2W/2); 
    $(".item-2 .text").css('margin-bottom', -item2H/2); 

我希望把這個變成一個for循環,其中的變量數量會數到任何數字,我需要它停止。

回答

3

可以使函數像這樣並隨時使用

toSetMargin(".item-2") 
toSetMargin(".item-2") 

function toSetMargin(objStr){ 
    var widthTmp = $(objStr + ' .text').height(); 
    var heightTmp = $(objStr + ' .text').height(); 

    obj.css('margin-left', -widthTmp/2); 
    obj.css('margin-bottom', -heightTmp/2) 
} 

此代碼不影響任何其他代碼。

+0

嗯,很好的解決方案。 – Feathercrown

+0

你很想念var obj = $(objStr); – user1702401

+0

不,其唯一字符串 –

0

像這樣的事情應該是你的情況很acceptible,我想:

for (var i = 1, len = someN; i < len; i++) { 
    var $item = $('.item-' + i); 
    $item.find('.text').css({ 
     'margin-left': -$item.width()/2, 
     'margin-bottom': -$item.height()/2 
    }); 
} 
1

哦男孩,其中一個問題。這應有助於(未經測試):

for(i=1;i<=STOPPING_NUMBER;i++){ 
    window["item"+i+"H"] = $(".item-"+i).height(); 
    window["item"+i+"W"] = $(".item-"+i).width(); //Was height, accident? 
    $(".item-"+i+" .text").css('margin-left', 0-window["item"+i+"W"]/2); //Hope this works lol 
    $(".item-"+i+" .text").css('margin-bottom', 0-window["item"+i+"H"]/2); 
} 
+0

@JaydipJ修正了它!謝謝。 – Feathercrown

+0

絕對不需要這種複雜的變量處理 – user1702401

+0

@ user1702401那麼,這是他可以用for循環得到的最接近他的答案。 – Feathercrown

2

你可以使用$('[class^="item-"]')讓所有具有與item-開始一類的元素,環比他們

$('[class^="item-"]').each(function(){ 
    var $elem = $(this); 
    var item1H = $elem.height(); 
    var item1W = $elem.width(); 
    $elem.find('.text').css({'margin-left': -item1W/2,'margin-bottom':-item1H/2}); 
}); 
+0

但是如果另一個對象有類似「item-duplicator」或其他以item開始的其他對象呢? – Feathercrown

+0

在這種情況下,如果該元素內部還有'.text'對象,則可能會出現問題。 你可以使用正則表達式來檢查類,或使用for循環 - 這取決於你的標記 –

+0

是的,用正則表達式的好主意。 – Feathercrown

1

猜測這些行:

var item1W = $(".item-1").height(); 
var item2W = $(".item-2").height(); 

本來應該是:

var item1W = $(".item-1").width(); 
var item2W = $(".item-2").width(); 

你可以這樣做:

function setCSS(item,attr,val) { 
    $(item +" .text").css(attr, (val * -1)/2); 
} 

var i, max = 10; 
for(i=1;i<=max;i++) { 
    setCSS(".item-"+ i,"margin-left",$(".item-"+ i).width()); 
    setCSS(".item-"+ i,"margin-bottom",$(".item-"+ i).height()); 
} 

什麼的函數內不太靈活:

function setCSS(item,w,h) { 
    $(item +" .text").css("margin-left", (w * -1)/2); 
    $(item +" .text").css("margin-bottom", (h * -1)/2); 
} 

var i, max = 10; 
for(i=1;i<=max;i++) { 
    setCSS(".item-"+ i,$(".item-"+ i).width()),$(".item-"+ i).height()); 
}