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循環，其中的變量數量會數到任何數字，我需要它停止。

來源

2016-09-29 Erasersharp

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

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

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

來源

2016-09-29 11:27:29

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

你很想念var obj = $（objStr）; – user1702401

不，其唯一字符串 –

像這樣的事情應該是你的情況很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 
    }); 
}

來源

2016-09-29 11:21:10

哦男孩，其中一個問題。這應有助於（未經測試）：

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

來源

2016-09-29 11:23:54 Feathercrown

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

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

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

你可以使用$('[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}); 
});

來源

2016-09-29 11:24:23

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

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

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

猜測這些行：

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

來源

2016-09-29 11:30:22 Tigger

Javascript-動態變量循環

回答

相關問題