Question

我一直试图让jQuery在JQuery缩放插件中选择一个特定的元素，但它似乎没有工作这是缩放区域的html标记

<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});
  }

控制台只返回.zoomImg.get（）的[]和.zoomImg.html（）的未定义

我想改变这个特定元素的css，只能通过jquery来实现。

任何帮助将不胜感激。谢谢

Answer 1

这里有很多我无法看到的，但我的猜测是当你在你的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});
  }

Answer 2

嘿所以我设法通过在页面的头部添加css来应用我的样式。即使该元素直到稍后才存在，也应用了这种样式。这是我使用的代码。

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

干杯。

JQuery类选择器不适用于Zoom插件

2 个答案: