Question

首先，抱歉我的英语不好:( 我有一个功能，该功能将我拥有的卡片洗牌并创建带有图像的DIVS 我需要为所有这些div创建一个事件，我的代码是：

//shuffles the cards
    function newBoard(){
        tiles_flipped = 0;
        var output = '';
        memory_array.memory_tile_shuffle();
        for(var i = 0; i < memory_array.length; i++){
            //output += '<div class="container" id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
            var img = memory_array[i];
            var tile = 'tile_' +i
            var div = document.createElement('div');
            div.className='container';
            div.id=tile;
            div.addEventListener('click',function(){
                memoryFlipTile(tile,img)},false);
            document.getElementById('memory_board').appendChild(div);
        }
        //document.getElementById('memory_board').innerHTML = output;
    }

    function score(){

        var level = $('.level').text();
        puntuacion = puntuacion + (10 * level);
        $('.score').text(puntuacion);
    }
    //compare cards
    function memoryFlipTile(tile,val){


    if(tile.innerHTML == "" && memory_values.length < 2){
        tile.style.backgroundImage = "url('bagels/"+val+"')"
        if(memory_values.length == 0){

            memory_values.push(val);
            memory_tile_ids.push(tile.id);
        } else if(memory_values.length == 1){
            memory_values.push(val);
            memory_tile_ids.push(tile.id);
            if(memory_values[0] == memory_values[1]){
                for(var j = 0; j<memory_tile_ids;j++ ){
                    alert($('#' + memory_tile_ids[j]));
                    $('#' + memory_tile_ids[j]).unbind('click');
                }
                score();
                tiles_flipped += 2;
                // Vaciamos los 2 arrays
                memory_values = [];
                memory_tile_ids = [];
                // Comprobamos que todas las cartas se han girado correntamente y empezamos un nuevo nivel
                if(tiles_flipped == memory_array.length){
                    /*document.getElementById('memory_board').innerHTML = "";
                    newBoard();*/
                }
            } else {
                function flip2Back(){
                    // Flip the 2 tiles back over
                    var tile_1 = document.getElementById(memory_tile_ids[0]);
                    var tile_2 = document.getElementById(memory_tile_ids[1]);
                    tile_1.style.background = 'url(carta.png) no-repeat';
                    tile_2.style.background = 'url(carta.png) no-repeat';
                    // Clear both arrays
                    memory_values = [];
                    memory_tile_ids = [];
                }
                setTimeout(flip2Back, 500);
            }
        }
    }
}

我使用以下jQuery代码解决了它

memory_array.memory_tile_shuffle();

    var $board = $('#memory_board');


    $.each(memory_array, function(i, v) {
        var id = 'tile_' + i;
        var card_tpl = '<div class="container" id="'+id +'"></div>';
        $(card_tpl)
            .on('click', function() {
                memoryFlipTile(this, memory_array[i]);
            })
            .attr('id', id).appendTo($board);
    });
    var $board = $('#memory_board');


    $.each(memory_array, function(i, v) {
        var id = 'tile_' + i;
        var card_tpl = '<div class="container" id="'+id +'"></div>';
        $(card_tpl)
            .on('click', function() {
                memoryFlipTile(this, memory_array[i]);
            })
            .attr('id', id).appendTo($board);
    });

这是应用程序：http://juego.adrianpyjavierr.hol.es/juego.html

Answer 1

你需要使用一个IIFE来返回为你的tile设置参数化的函数，并在每次循环迭代时使用img。具体改变：

div.addEventListener('click',function(){
            memoryFlipTile(tile,img)},false);

由：

div.addEventListener('click',(function(ti,im){
        return memoryFlipTile(ti,im);
})(tile,img),false);

有关更多信息，请在此处发表关于IIFE的好帖子：

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

最佳。

Answer 2

您可以使用.live，这是一个jQuery事件，为现在和将来与当前选择器匹配的所有元素附加事件处理程序。＆＃39;

这是jQuery官方API文档： https://api.jquery.com/live/

带参数的addEventListener到函数中

2 个答案: