Question

我试图减少我重复的代码量。

目前我有以下内容：

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

Answer 1

您可以制作这样的功能并随时使用

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

此代码不会影响任何其他代码。

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

Answer 3

小男孩，其中一个问题。这应该有助于（未经测试）：

TripState{
   Trips trips //it is mapped as trip_id
}

Answer 4

猜测这些界限：

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

Answer 5

在你的情况下，这样的东西应该是非常可以接受的，我想：

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

Javascript-动态变量循环

5 个答案: