0

我有一个简单的图像滑块，html 如下所示：

<ul id="gallery-slider">
    <li class="slide-li" >
        <img src="img1.png" width="1024" height="590" alt="img1">
    </li>
    <li class="slide-li" >
        <img src="img2.png" width="1024" height="590" alt="img2">
    </li>
    <li class="slide-li" >
        <img src="img3.png" width="1024" height="590" alt="img3">
    </li>
    ...
</ul>

现在我想给它添加一些大拇指来概览图像。我想从幻灯片中的图像创建拇指。我正在使用 Zepto 并尝试了以下方法来获取图像并创建新图像：

//imageSlider is the image slider instance in use

for (var i = 1; i <= imageSlider.length; i++) {
    //find the image in li
    var img = $('#gallery-slider li').eq(i-1).find('img').clone().attr({'width': 268, 'height': 172});
        //view cloned element in console
        console.log(img);
    ...
    //here the img var will get pushed into an array
}

现在，当您在控制台中吐出 img var 时，它会显示空对象。我认为问题在于 find() 函数，因为当我这样做时：

var img = $('#gallery-slider li').eq(i-1).clone();

img var 不为空——控制台输出显示克隆的 li 元素。这是一个错误还是我不能将 clone() 函数与 find() 结合使用？

编辑：

我也试过这个：

var img = $('#gallery-slider li').eq(i-1).find('img'),
    thumb = img.clone();

——同样的结果。

4

2 回答 2

1

正如之前的讨论，在 chrome 和 firefox 中它可以正常工作，请参见此处。

然后我在 safari 中尝试了它。console.log(img)确实印空了。但后来我试了一下console.log(img.length)，它打印出来了1。

所以我认为safari 的调试工具中可能存在一些错误。

然后我忽略了结果console.log()并尝试使用克隆的元素和以下代码：

$('#gallery-slider').after(img);

看看它是否真的是空的。

结果证明了我的看法。它工作得很好。

见这里。

于 2013-03-08T02:38:46.870 回答
0

Zepto 没有克隆功能。作为参考，您可以使用此图表。

您可以使用以下内容轻松实现克隆：

    $.fn.clone = function(){
          var ret = $();
          this.each(function(){
               ret.push(this.cloneNode(true))
          });
        return ret;
    };

从这里。

于 2013-03-07T10:45:51.363 回答