0

.js 配列から製品をロードするページを作成しようとしています:

    var products= new Array( );

    products.push( {name: 'product01', photo: 'tshirt1', title: 'One Man Wolf Pack', price: '14.99', description: 'All Wolf Packs start with one'} );
    products.push( {name: 'product02', photo: 'tshirt2', title: 'Bear Arms', price: '14.99', description: 'Know your rights'} );
    products.push( {name: 'product03', photo: 'tshirt3', title: 'Accuracy', price: '19.99', description: 'The opposite of a fallacy'} );
    products.push( {name: 'product04', photo: 'tshirt4', title: 'HUMA', price: '19.99', description: 'A twist on sports'} );
    products.push( {name: 'product05', photo: 'tshirt5', title: 'Illuminati', price: '19.99', description: 'You went, now get the t-shirt'} );

    function get_product( name ) {
        for( var x = 0 ; x < products.length ; x++ ) {
            if( products[ x ].name == name ) {
                return products[ x ];
            }
        }
        return null;
    }

For ループを使用して各項目をステップ実行し、製品の単純なレイアウトを作成しようとしています。

    window.onload = function ( ) {          
        load_page( );
    }


    function create_cookie( x, name1 ) {
        //if( this.onclick ){
            document.cookie = "details" + x + "=" + name1;
        //}
    }
    function load_page (  ){
        var holder = document.getElementById( "details" );
        for( var x = 0 ; x < products.length ; x++ ) {
            var li = document.createElement( "li" );

            var name1 = products[ x ].name;
            var href1 = document.createElement( "a" );
            href1.href = "details.html";    
            href1.id = products[ x ].name


            var image1 = document.createElement( "img" );
            image1.src = products[ x ].photo + ".jpg" ;

            var title1 = document.createTextNode( products[ x ].title );

            var bk1 = document.createElement( "br" );
            var bk2 = document.createElement( "br" );
            var hor = document.createElement( "hr" );

            href1.appendChild( image1 );    
            li.appendChild ( href1) ;
            li.appendChild( title1 );
            holder.appendChild( li );

            href1.onclick = create_cookie( x, name1 );

            alert(document.cookie);
        }   
    }

onclick イベントで問題が発生すると思います。「クリック」イベントをチェックする「If ステートメント」がない場合、すべての Cookie が自動的に読み込まれます。

おそらく、間違ってコーディングされたボタンを持っているのでしょう。

ボタンを使用してこれを適切に作成し、Cookie を作成する方法についての洞察をいただければ幸いです。

ありがとう！

〜アンドレアス

4

1 に答える 1

1

クリック ハンドラのコード行を次のように変更する必要があります。

href1.onclick = create_cookie( x, name1 );

これに：

(function(x, name1) {
    href1.onclick = function() {create_cookie( x, name1 )};
}) (x, name1);

あなたは2つの別々の問題を抱えていました。create_cookie(x, name1)まず、クリックが発生したときに後で呼び出される関数への参照ではなく、関数をすぐに実行した結果を onclick に割り当てていました。したがって、Cookie はすぐに作成され、クリックしても何も起こりません。

第 2 に、ループ内でこのようなことを行うときに、forループ内で変化するローカル変数を参照すると、for後でクリック イベントで実行されるコードでは機能しません。これは、forループが後で実行され、これらの変数がすべてforループの最後にある値を持つためです。私の推奨するコードは、これらの変数の値を自己実行関数クロージャーでキャプチャすることでこれを解決し、各クリック ハンドラーが変数の独自のコピーを持つようにします。この問題を解決する方法は他にもありますが、これは最も簡単な方法の 1 つです。

于 2012-04-30T01:30:23.120 に答える