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ではうまく機能します。ここを参照してください。

そしてサファリでやってみました。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 に答える