以下用于切换图像的代码可以按预期工作...直到出于格式化原因,在控件流中引入了另一个HTML标记。通过插入一个简单的break标记(下面带有星号),其后的块将其逻辑移位1,即单击pict/8/tiny
将显示pict/4/large
pict/4/tiny
将显示pict/5/large
pict/5/tiny
将显示pict/6/large
pict/6/tiny
将显示一个空白
段落标签中允许使用break标签,但是为什么出于JavaScript的目的却混淆了跨度?以及如何解决?
$(document).ready(function() {
$("#image-flip_controls").on('click', 'span', function() {
$("#image-flip img").removeClass("opaque");
var newImage = $(this).index();
$("#image-flip img").eq(newImage).addClass("opaque");
$("#image-flip_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='image-flip_controls'>
<span class="selected"><img src="/pict/1/tiny_27122_20170321160746452.jpg" /></span>
<span><img src="/pict/2/tiny_LI_P_20150215_059.jpg" /></span>
<span><img src="/pict/3/tiny_LI_P_20150215_056.jpg" /></span>
<span><img src="/pict/7/tiny_41513_20180525135457797.jpg" /></span>
**<br />**
<span><img src="/pict/8/tiny_27130_20170321160804655.jpg" /></span>
<span><img src="/pict/4/tiny_LI_P_20140901_016.jpg" /></span>
<span><img src="/pict/5/tiny_LI_P_20120130_005.jpg" /></span>
<span><img src="/pict/6/tiny_EN_P_20140615_033.jpg" /></span>
</p>
<div class='row'>
<div id='image-flip' class='shadow'>
<img class="opaque" src="/pict/1/large_27122_20170321160746452.jpg" />
<img src="/pict/2/large_LI_P_20150215_059.jpg" />
<img src="/pict/3/large_LI_P_20150215_056.jpg" />
<img src="/pict/7/large_41513_20180525135457797.jpg" />
<img src="/pict/8/large_27130_20170321160804655.jpg" />
<img src="/pict/4/large_LI_P_20140901_016.jpg" />
<img src="/pict/5/large_LI_P_20120130_005.jpg" />
<img src="/pict/6/large_EN_P_20140615_033.jpg" />
</div>
</div>
最佳答案
元素的索引是其在父元素中的位置。
给定<div> <img> <img> </div>
:
第一张图片是div中的第一个元素
第二张图片是div中的第二个元素
给定<div> <img> <br> <img> </div>
:
第一张图片是div中的第一个元素
第二个图像是div中的第三个元素
您似乎希望<br>
元素被忽略。不会的这是一个元素。
使用.index( selector )
来获取jQuery集合中的索引。