0

我在显示页面中的元素时遇到问题

我有像

<img src='test1.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test2.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test3.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test4.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test5.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test6.jpg'>
<div>
<a href='#'>change</a>
</div>

图像通过 DB 记录添加到 dom 中,我想为每个图像添加 < div>with change < a> 标签,以便为用户提供执行操作的选项(例如更改图像源)。我所有的div都有css

display: block;
float: right;

并且图像有

display: inline-block;

我的问题是

图像和 div 的顺序错误。

例如:

img1 img2 img3 img4 img5 img6        div6  div5 div4 div3 div2 div1

单击div6将更改img6属性。

这是我需要的正确顺序

img1 img2 img3 img4 img5 img6        div1  div2 div3 div4 div5 div6

我该如何解决这个问题?非常感谢!

4

2 回答 2

1

考虑浮动元素,因为它们正在推入堆栈。如果你想让 div 看起来像

div1 div2 div3

然后你必须按这个顺序把它推到dom

div3 div2 div1

但是,更简单和更常见的方法是使用jQuery获取单击的 div 的索引并将更改应用于具有相同索引的图像。这是一个示例,它将在单击相应的 div 时隐藏图像:

$("div").click(function(){
    var idx = $(this).index();
    $("img:eq("+idx+")").hide(); //change that to whatever operation you want to do on the image
});

这可能有用:

于 2013-02-13T00:15:28.727 回答
1

我不确定放置/用户交互是否理想,但是如果您真的希望imgs 排列在左侧并按顺序排列,而divs 排列在右侧并按顺序排列...

divs 放入容器 div 并使用float: right.

您不需要任何额外的样式;较小div的 s 不需要displayfloat指定,img也不需要display指定。

于 2013-02-13T00:26:19.887 回答