0

我试图找出我是否可以在 HTML5 + Javascript 中做这样的事情。我也更喜欢在纯 javascript 中执行此操作，而不是使用 jQuery 之类的库。这是我正在尝试做的一个例子：

（我来自 Lua，所以请原谅我的代码，我还不知道如何用 Javascript 编写代码，但它应该是可读的，所以你可以理解我正在尝试做什么。提前感谢并抱歉给您带来麻烦）

table = { "Image1", "Image2", "Image3" }
images = {}

for i = 0, 100 do
  images[i] = newImage( "images/" + table[i] + ".png" )
  images[i].x = 30 * i
  images[i].num = i
  images[i].addEventListener( onTouchDown, doSomething )
end

这将加载 101 个图像，从表中获取图像的名称，并为每个图像提供一个事件侦听器。这可能吗？提前感谢您提供有关该主题的任何信息！

4

2 回答 2

1

使用事件委托：

document.getElementById('newDiv').addEventListener('onTouchDown', function (event) {
    if (event.target && event.target.nodeName === 'IMG') {
        console.log(event.target);
    }
});

小提琴

于 2013-05-27T03:52:51.907 回答
1

这将使用字符串创建 3 个图像table并将它们附加到document.body...

var table = ["Image1", "Image2", "Image3"];
var images = [];

for (var i = 0; i < table.length; i++) {
    images[i] = new Image(); // creates an image
    images[i].src = "images/" + table[i] + ".png"; // gets image location from table
    images[i].style.marginLeft = (i*30)+"px"; // pushes images i*30 pixels to the left

    if (images[i].addEventListener)
        images[i].addEventListener("onTouchDown", function () { /* Do something */ });

    else if (images[i].attachEvent) // addEventListener isn't always supported
        images[i].attachEvent("onTouchDown", function () { /* Do something */ });

    document.body.appendChild(images[i]); // append newly created image to body
}

这是一个JSFiddle ...

编辑：如果你想使用position:absolute而不是 a margin，用marginLeft这个替换行应该可以解决问题：

    images[i].style.position = "absolute"; // Sets absolute positioning
    images[i].style.left = (i*30)+"px"; // pushes images i*30 pixels left

有关可以通过 Javascript 更改的 CSS 属性的列表，请参阅此页面。但通常你需要知道的是：

大多数 CSS 属性都表示为 Style 对象中的属性。对于非连字符的属性，属性是相同的，而对于连字符的属性，删除连字符并将其后面的第一个字母大写。例如，要通过 DOM 操作 CSS 的“background-color”属性，语法类似于： document.getElementById("george").style.backgroundColor = "white";

（取自javascriptkit.com）

于 2013-05-27T04:05:37.753 回答