移動DOM元素位置動態

我動態生成的跨度，並把他們的位置爲這樣：移動DOM元素位置動態

 $('#myObstacles').append("<span id=\"" + test + randX + "\">" + items[randObj] + "</span>"); 
     document.getElementById("test"+randX).style.position="absolute"; 
     document.getElementById("test"+randX).style.left=randX; 
     document.getElementById("test"+randX).style.top=randY;

然後，我有應該將這些DOM setInterval()函數調用moveSpans()跨越每隔一段時間：

function moveSpans() { 
     $("#myObstacles span").each(function (index, val) { 
      val.style.top-=10; 
     }); 
    }

由於某些原因，附加的DOM跨度爲#myObstacles不會更改位置。

這是爲什麼？

來源

2014-02-22 Growler

在「功能（索引，VAL）」中的「VAL」是一個jQuery對象，嘗試：

function moveSpans() { 
    $("#myObstacles span").each(function (index, val) { 
     $(val).css({top: -10}); 
    }); 
}

來源

2014-02-22 17:33:44 wrivas

我沒有把'css top'設置爲10 px，我想遞增地將它向上移動10px。所以像'.css（{top- = 10}）''？ – Growler

'$（val）.css（「top」，「 - = 10」）'This works – Growler

正如Wlises說，你需要堅持使用jQuery方法或核心JavaScript方法;如果你使用的是一個jQuery對象（在上面的回調函數中以val的形式返回），請使用jQuery方法.css()。

因此：

GOOD：val.css("top","-=10")
BAD：val.style.top -= 10（這是一個原生的JavaScript性能，但對jQuery的對象，沒有style財產，唯一的.css()訪問。 /增變器法）

由於您試圖減量top由10px的，是可以接受的使用方法：val.css("top","-=10")

這裏有一個解釋直接從jQuery的文檔：

As of jQuery 1.6, .css() accepts relative values similar to .animate() . Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css("padding-left", "+=15") would result in a total padding-left of 25px.

來源

2014-02-22 17:42:13

Thank you，but'val.css（「top」，「 - = 10」）;'in'$ .each '不起作用，給出錯誤'Uncaught TypeError：Object＃在控制檯中沒有方法'css'' – Growler

你試過嗎？

function moveSpans() { 
    $("#myObstacles span").each(function (index, val) { 
     var $el = $(val) 
     $el.css({top: $el.css("top")-10}); 
    }); 
}

來源

2014-02-22 18:03:00

移動DOM元素位置動態

回答

相關問題