JQuery的類選擇

我一直試圖讓jQuery來選擇JQuery的變焦插件特定的元素，但它似乎是工作這是縮放區域JQuery的類選擇

<div class="zoom" style="width: 60% !important; display: block; position: fixed; overflow: hidden;">  
    <img src="//cdn.shopify.com/s/files/1/0456/6809/t/3/assets/bx_loader.gif?27021" alt="" class="abs-center-translate loader"> 
    <img src="//cdn.shopify.com/s/files/1/0456/6809/products/568A.jpeg?v=1413437903" class="zoomImg" style="position: absolute; top: -1385.54456824513px; left: -389.68108776267px; opacity: 1; width: 682.5px; height: 1024px; border: none; max-width: none; max-height: none;"> 
</div> 


function showZoomImgSmaller(img) { 
    var zoomsmall = $('.zoom'); 
    zoomsmall.empty(); 

    zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}'); 
    $('.collectionZoomContainer').show(); 
    zoomsmall.attr("style","width:60%!important"); 
    var zoomsmallimg= $('.zoom > img'); 
    console.log(zoomsmallimg.next().get()); 

    $('.zoomImg').attr("style","max-width:500px!important"); 
    zoomsmall.show(); 
    zoomsmall.zoom({url: img, magnify: 0.5}); 
    }

的HTML標記

控制檯將返回剛剛[]爲.zoomImg.get（）和一個未定義的.zoomImg.html（）

我想改變這種特定元素的CSS，只能通過jQuery的做一個。

任何幫助將不勝感激。謝謝

來源

2014-10-20 Isabel Inc

這適用於我：'

function showZoomImgSmaller（img）{ var zoomsmall = $（'。zoom'）; console.log（zoomsmall）; } showZoomImgSmaller（''）;' – pherris 2014-10-20 14:47:13

是的縮放div的作品。但它裏面的img標籤返回一個未定義的提到。我想選擇div（.zoomImg）中的第二個圖像，所以我可以動態改變它的高度。感謝回覆 – 2014-10-20 15:40:10

'zoomsmall.empty（）;'是在你調用' $（'。zoomImg'）'div中唯一的DOM是你用append調用添加的。 – pherris 2014-10-20 16:10:24

嘿，所以我設法通過在頁面頭添加CSS來應用我的樣式。儘管元素不存在，但這種風格仍然適用。這是我使用的代碼。

$("<style type='text/css'> .zoomImg{ max-width:200px!important;} </style>").appendTo("head");

乾杯。

來源

2014-10-21 10:35:40

這裏有很多我看不到，但我的猜測是，當你在你的div上調用empty（）時，你正在移除div的所有子節點（包括你正在嘗試的.zoomImg類稍後查看）。而不是刪除所有元素，你可能只想刪除第一個圖像：

function showZoomImgSmaller(img) { 
    var zoomsmall = $('.zoom'); 
    $('.zoom > .loader').remove(); //change is here 

    zoomsmall.append('{{ "bx_loader.gif" | asset_url | img_tag: "", "abs-center-translate loader" }}'); //angular? not sure what this does 
    $('.collectionZoomContainer').show(); //not sure what this 
    zoomsmall.attr("style","width:60%!important"); 
    var zoomsmallimg= $('.zoom > img'); 
    console.log(zoomsmallimg.next().get()); 

    $('.zoomImg').attr("style","max-width:500px!important"); 
    zoomsmall.show(); 
    zoomsmall.zoom({url: img, magnify: 0.5}); 
    }

來源

2014-10-20 16:16:18 pherris

嘿謝謝你的回覆。但是這不起作用。所以基本上，標記是用於模態框中的jquery縮放插件。我認爲Jquery Zoom是通過爲zoomImg使用CSS動態的。任何方式來測試jQuery是否應用我的樣式。另外，當我將.zoom類中的所有img標籤作爲目標時，它會將樣式應用於加載器圖像，但不會應用.zoomImg。任何幫助表示讚賞。 – 2014-10-21 03:33:22

JQuery的類選擇

回答

相關問題