Question

我有一个解析JSON字符串并生成切片网格的函数。网格宽度和高度在JSON中设置，以及＆＃34;特殊瓷砖的坐标＆＃34;喜欢障碍。

事实上，解析JSON的函数会生成地图，但不会添加＆＃34;障碍＆＃34;因为它们是动态添加的，所以在tile上有类。

我解析JSON的函数：

            $('#json-result textarea').change(function(){

                $.each($.parseJSON($(this).val()), function (item, value) {
                    if(item == 'name') { $('#name').val(value); }
                    if(item == 'width') { $('#width').val(value); }
                    if(item == 'height') { $('#height').val(value); }

                    generateMap();

                    if (item == 'obstacles') {
                        $.each(value, function (i, object) {

                            console.log('[data-x="' + object['x'] + '"][data-y="' + object['y'] + '"]');
                            var obs = $('#map-preview').find('[data-x="' + object['x'] + '"][data-y="' + object['y'] + '"]');

                            console.log(obs);
                            obs.addClass('obstacle');


                        });
                    }

                });

            });

generateMap函数在这里生成网格。它在输入框中获得高度和宽度的值，因为该过程也是＆＃34;反向＆＃34;。

function generateMap(){
    $('#map-preview').html('');

    var height = $('#height').val();
    var width = $('#width').val();

    for(h = 0 ; h < height ; h++) 
    {
          for(w = 0 ; w < width ; w++)
          {
               $('#map-preview').append('<div class="tile" data-x="' + w + '" data-y="' + h + '"></div>');
          }

          $('#map-preview').append('<br />');
    }
}

生成的HTML位于map-preview div中。 map-preview div在开头就是空的。＆＃34;瓷砖＆＃34;是动态添加的。

<div id="map-preview">
    <div class="tile" data-x="0" data-y="0"></div>
    <div class="tile" data-x="1" data-y="0"></div>
    <div class="tile" data-x="2" data-y="0"></div>
    <div class="tile" data-x="3" data-y="0"></div>
    <br>
    <div class="tile" data-x="0" data-y="1"></div>
    <div class="tile" data-x="1" data-y="1"></div>
    <div class="tile" data-x="2" data-y="1"></div>
    <div class="tile" data-x="3" data-y="1"></div>
    <br>
    <div class="tile" data-x="0" data-y="2"></div>
    <div class="tile" data-x="1" data-y="2"></div>
    <div class="tile" data-x="2" data-y="2"></div>
    <div class="tile" data-x="3" data-y="2"></div>
    <br>
</div>

所以，在第一段代码中，我尝试在障碍区块中添加一个类，但没有做任何事情。当我尝试在Chrome控制台中输入相同的代码时，它可以正常工作，但不能代码。

我尝试使用和不使用.find（），但没有任何作用。

Answer 1

generateMap();很可能应该在.each()之外调用，因为现在每次迭代$.each($.parseJSON($(this).val()), function (item, value) {都会重新生成地图，从而删除所有先前的更改。

将类添加到动态添加的元素

1 个答案: