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-动态变量循环

回答

相关问题