jQuery。每個僅在引導輪播中的第一個元素上工作

我試圖在引導輪播中使用ElevateZoom。我使用jQuery .each函數在傳送帶上的第一張圖像上正常工作，但它在任何後續圖像上都無法正常工作。看起來它只適用於頁面加載時「活動」的項目。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>

這裏是從我的外部JavaScript文件中的代碼。我在結束標記之前包含了這個權限，因爲它在標題中不起作用。另外值得注意的是，如果我使用$（document）.ready，它似乎並不工作。

$('.carousel-inner .item a img').each(function(){ 
    $(this).elevateZoom({ 
     zoomType: "inner", 
     cursor: "crosshair" 
    }); 
});

我很感激任何幫助理解爲什麼這只是在我的傳送帶的第一張圖片上工作。

編輯： 我也試過手動選擇每個圖像，但它仍然只適用於加載的一個圖像加載頁面時：

$("#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" 
    });

來源

2017-09-15 Tony M

你確定你需要使用'.each（）'嗎？嘗試'$（'。carousel-inner .item a img'）。elevateZoom（...）' – Barmar

剛剛嘗試過，不幸的是，即使在第一張圖片中，該代碼也不起作用。 –

這是沒有意義的，它在HTML的末尾工作，但不在'$（document）.ready（）'中。 – Barmar

如果你想通過在所有圖像循環旋轉木馬內部類試試這個...

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

或

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

來源

2017-09-15 21:42:54

這兩個中的第一個是OP在他們的問題接近結束時已經有的。這是如何回答他們的問題？ – trincot

我試着改變選擇器，因爲你說過，但仍然有同樣的問題。我不認爲這是選擇器的問題，而是它似乎只識別加載到頁面的元素。 –

jQuery。每個僅在引導輪播中的第一個元素上工作

回答

相關問題