Jquery 每个都只处理引导转盘中的第一个元素

我想用在一个自动引导转盘上。我已经使用jQuery在旋转木马中的第一个图像上正常工作了。每个函数都正常工作，但在随后的任何图像上都不能正常工作。它似乎只在页面加载时对“活动”的项目起作用

以下是我的旋转木马的HTML：

<div id='carousel-custom' class='carousel slide'>
    <div class='carousel-outer'>
        <!-- Wrapper for slides -->
        <div class='carousel-inner'>
          <div class='item active'>
            <span></span>
            <a href="images/large/product-image01.png" data-fancybox><img id="image_01" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image01.png" alt='' /></a>
          </div>
          <div class='item'>
          <span></span>
            <a href="images/large/product-image02.png" data-fancybox><img id="image_02" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image02.png" alt='' /></a>
          </div>
          <div class='item'>
            <a href="images/large/product-image03.png" data-fancybox><img id="image_03" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image03.png" alt='' />
          </div>  
          <div class='item'>
            <a href="images/large/product-image04.png" data-fancybox><img id="image_04" class="img-responsive" src='images/product-image.png' data-zoom-image="images/large/product-image04.png"alt='' />
          </div>
        </div>

        <!-- Controls -->
        <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
          <span class='glyphicon glyphicon-chevron-left'></span>
        </a>
        <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
          <span class='glyphicon glyphicon-chevron-right'></span>
        </a>
      </div>

    <!-- Indicators -->
    <ol class='carousel-indicators'>
      <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='images/item-thumb.png' alt='' /></li>
      <li data-target='#carousel-custom' data-slide-to='1'><img src='images/item-thumb.png' alt='' /></li>
      <li data-target='#carousel-custom' data-slide-to='2'><img src='images/item-thumb.png' alt='' /></li>
      <li data-target='#carousel-custom' data-slide-to='3'><img src='images/item-thumb.png' alt='' /></li>
    </ol>
</div>

我很感激任何人能帮助我理解为什么这只适用于我旋转木马中的第一张图片

编辑： 我还尝试手动选择每个图像，但它仍然只适用于页面加载时加载的一个图像：

$("#image_01").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });
    $("#image_02").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });
    $("#image_03").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });
    $("#image_04").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair"
    });

---

如果您想循环遍历carousel内部类中的所有图像，请尝试以下操作

$('.carousel-inner img').each(...

或

---

这两个问题中的第一个是OP在接近尾声时的问题。这是如何回答他们的问题的？我试着像你说的那样更改选择器，但仍然有同样的问题。我认为这不是选择器的问题，而是它似乎只能识别随页面加载的元素。是否确实需要使用

.each（）

？尝试一下

$（'.carousel inner.item a img'）。ElevateToom（…）

只是尝试了一下，但不幸的是，在使用该代码的第一个图像上都不起作用。这在HTML末尾有效，但在

$（document.ready（）

中无效。

$('.carousel-inner img').each(...

$('.carousel-inner').find(img).each(...