Question

我要疯了。我在浏览一些图片时有一个光滑的滑块。这是HTML输出：

<div class="slider slider-nav slick-initialized slick-slider">
    <div class="slick-list draggable">
         <div class="slick-track" style="opacity: 1; width: 730px; transform: translate3d(0px, 0px, 0px);">
             <div class="images"/>
             <div class="images"/>
             <div class="images"/>
         </div>
    </div>
</div>

这是填充滑轨的原因：

 <div class="slider slider-nav">
      <s:iterator value="asset.photos">
           <div class="slider-nav__slide">
                <img src="<s:property value="webPath" />" onerror="this.src='<s:url value="/images/new/default-placeholder.png" />'">
            </div>
      </s:iterator>
 </div>

因此struts2遍历资产的图像，并通过漂亮的导航显示它们。我不确定光滑的导航本身如何工作。

我有一个小错误，它的平滑轨道（如HTML输出所示）获得了transform: translate3d(0px, 0px, 0px);属性。调整大小时，它弄乱了，基本上，我发现如果资产中的图片少于5张或更少，我需要给它提供transform: translate3d(0px, 0px, 0px) !important;属性

所以我尝试了很多事情... jQuery，香草js选择器，children（），find（），item（）...什么都行不通。我无法定位平滑轨道类。

$(document).ready(function() {
    var photos = <s:property value="asset.photos.size"/>;
//  var div = document.getElementsByClassName('slider-nav');
//  var slick = div.item(0);
    photos <= 5 ? $('.slider-nav .slick-track').css("transform", "translate3d(0,0,0) !important") : null; 
})

所以有趣的部分是console.log($('.slider-nav')给了我这个

> w.fn.init [div.slider.slider-nav, prevObject: w.fn.init(1)]
    0: div.slider.slider-nav.slick-initialized.slick-slider
    length: 1
    prevObject: w.fn.init [document]
    __proto__: Object(0)

，当我打开它时，我看到了childNodes，我看到了slick-list，我也看到了光滑列表的孩子，slick-track，但是当我console.log($('.slider-nav > .slick-list > .slick-track'))时，给我这个：

> w.fn.init [prevObject: w.fn.init(1)]
    length: 0
    prevObject: w.fn.init [document]
    __proto__: Object(0)

好像没看到它...我试图通过children（），find（），上帝知道它的目标...我就像是不使用Mutation.observer的一步...因为当我登录导航栏时，我可以看到孩子，所以滑轨没有足够的时间加载是没有意义的。请..这伤害了我个人

操纵DOM节点

0 个答案: