动态变量循环

Javascript- Dynamic variable loop

本文关键字：循环 变量 动态      更新时间：2023-09-26

我正在努力减少重复的代码量。

目前我有以下内容:

    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循环中，变量number将计数到我需要它停止的任何数字

您可以像这样创建函数并在需要时使用

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

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

天哪，其中一个问题。这应该有帮助(未测试):

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

猜测这些行:

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

我想这样的事情在你的情况下应该是相当可以接受的:

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
    });
}
相关文章：