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);

你有两个不同的问题。首先，您为 onclick 分配了立即执行该create_cookie(x, name1)函数的结果，而不是对稍后在单击发生时调用的函数的引用。因此，cookie 将立即创建，点击时不会发生任何事情。

其次，当您在for循环中执行此类操作，但引用循环中正在更改的局部变量时for，它将不适用于稍后在 click 事件中执行的代码。那是因为for循环将在稍后完成，并且这些变量都将具有它们在for循环结束时的值。我推荐的代码通过在自执行函数闭包中捕获这些变量的值来解决这个问题，这样每个点击处理程序都有自己唯一的变量副本。还有其他方法可以解决此问题，但这是最简单的方法之一。

于 2012-04-30T01:30:23.120 回答