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的类选择

回答

相关问题