0

我正在创建一个简单的 java 脚本驱动的图片拼图。到目前为止，我所做的是创建一个作为父级工作的 div，在该 div 内，我创建了 9 个 div 元素来表示图片的每个部分（这是一个 3x3 拼图）。这是我用于图片元素 div 的 CSS 样式。

.part{
background-image: url(../images/image.jpg);
background-position: top left;
background-repeat: no-repeat;
box-shadow: 1px 1px 10px;
}

 #part{
width: 200px;
height: 200px;
float: left;
border: 1px dotted #fff;
}

我的概念是，如果用户单击 div 元素，脚本应该检查相邻的 div 元素。如果元素没有分配背景图像，它应该获取被点击元素的值。

我的问题是，如何从用户点击的 div 中获取相邻 div 的元素 id！

4

2 回答 2

1

您可以使用 dom 对象的nextSibling属性访问相邻的 div

于 2013-01-08T12:49:11.727 回答
0

我推荐 Ankur 的答案，但我必须建议你必须非常小心 nextSibling。看看下面的标记：

<div id="Div1">Text1</div>
<div id="Div2">Text2</div>

在 chromedocument.getElementById("Div1").nextSibling中将返回带有 id 的 div Div2。然而，在 IE 中，同一行返回一个 #Text 节点，引用两个div标签之间的空白。

为确保您将获得下一次div尝试以下内容。

var div = document.getElementById("Div1");
do {
    div = div.nextSibling;
} while (div !== null && div.tagName !== "DIV");

编辑：我设置了一个 jsFiddle 来演示我可能认为您正在寻找的内容：http: //jsfiddle.net/9q6vz/

于 2013-01-08T12:56:30.267 回答