使用按钮 javascript 在 forloop 中创建 Cookie

Creating a Cookie in a forloop with a button javascript

本文关键字：创建 Cookie forloop 按钮 javascript      更新时间：2023-09-26

我正在尝试创建一个从.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);
        }   
    }

我认为问题发生在我的点击事件上。 如果我没有"If 语句"来检查"单击"事件，那么所有 cookie 将自动加载。

也许我有不恰当编码的按钮。

有关如何使用按钮创建cookie正确创建此内容的任何见解将不胜感激。

谢谢！

~安德烈亚斯

您需要从下面更改单击处理程序代码行：

href1.onclick = create_cookie( x, name1 );

对此：

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

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

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

相关文章：