以下用于切换图像的代码可以按预期工作...直到出于格式化原因,在控件流中引入了另一个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集合中的索引。

10-07 19:27
查看更多