0

一連の を作成し、単純な関数を使用して参照ファイルをdiv介してサムネイル画像を挿入しています。js基本的に、ループ内の各 new にクリック ハンドラーを割り当てようとしてdivいますが、おそらく構文上の理由で機能していません。

これは私のコードです（更新済み）...

function makethumbs() {

    for (var i = 0; i < 14; i++) {

        var backgroundUrl = script_vars + "/images/gallery/thumbs/g" + (i+1) + ".jpg",
            newdiv = $('<div />', {id: 'thumbnail'+i, width: 145, height: 84});
            newdiv.css({display:'inline', 
                        float:'left', 
                        margin:'2px 2px 0 0', 
                        color:'#000', 
                        fontSize:'18px', 
                        zIndex:0,
                        html:'P',
                        background: 'url(' + backgroundUrl + ')'
                       });
            newdiv.click(function() {
                $(this).stop(true, true).fadeTo('slow', 0);
            });

        $('#thumbholder').append(newdiv);
    }

    $('#arrowright').click(function() {
        var L = $('#thumbholder'),
            margL = parseInt(L.css('marginLeft'), 10),
            newMarg = (margL - 147) + 'px',
            anim = {opacity: 1};
            anim["marginLeft"] = newMarg;
        $('#thumbholder').stop(true, true).animate(anim, 400);

    });
}

正常に動作する追加のクリック ハンドラもあります#arrowright。クリック可能な矢印としてのaz順序付けがdiv、サムネイルをオーバーレイするコンテナ内にあるかどうかはわかりませんdiv。

4

2 に答える 2

2

jQuery を使い続けてみませんか?

function makethumbs() {
    for (var i = 0; i < 14; i++) {

        var backgroundUrl = script_vars + "/images/gallery/thumbs/g" + (i+1) + ".jpg",
            newdiv = $('<div />', {id: 'thumbnail'+i, width: 145, height: 84});
            newdiv.css({display:'inline', 
                        float:'left', 
                        margin:'2px 2px 0 0', 
                        color:'#000', 
                        fontSize:'18px', 
                        zIndex:0,
                        html:'P',
                        background: 'url(' + backgroundUrl + ')'
                       });
            newdiv.click(function() {
                $(this).stop(true, true).fadeTo('slow', 0);
            });

        $('#thumbholder').append(newdiv);
    }

    $('#arrowright').click(function() {
        var L = $('#thumbholder'),
            margL = parseInt(L.css('marginLeft'), 10),
            newMarg = (margL - 147) + 'px',
            anim = {opacity: 1};
            anim["marginLeft"] = newMarg;
        $('#thumbholder').stop(true, true).animate(anim, 400);

    });
}​

主な問題は、jQuery 構文を使用してクリック ハンドラーをネイティブ JS DOM 要素にアタッチしようとすることです。

于 2012-12-10T01:21:01.380 に答える
0

jQueryを使用しているように見えるので、に変更newDiv.clickします。$(newDiv).clickただし、ネイティブの JavaScript を引き続き使用したい場合は、次のように要素のイベントを設定できます。

newDiv.addEventListener('click',function(){
//you code here
});
于 2012-12-10T01:28:08.983 に答える