Estoy intentando durante horas solucionar este problema y estoy en una especie de callejón sin salida.

Tengo este fragmento de código para generar una imagen en miniatura desde un mapa de sprites, analizando un json:

$('#dataArea').html(' ');
        for (var i in data.area) {
                    $('#dataArea').append(data.area[i].name +'<div class="img" style="height:48px; width:48px; background: url("//ddragon.leagueoflegends.com/cdn4.15.1/img/sprite/'+data.area[i].image.sprite +') -'+data.area[i].image.x+'px -'+data.area[i].image.w+'px no-repeat;</div>')
               }

(los nombres de las variables son solo para demostración)

Lo que obtengo como resultado es, por ejemplo,

<div class="img" style="height:48px; width:48px; background: url(" ddragon.leagueoflegends.com="" cdn4.15.1="" img="" sprite="" champion3.png)="" -384px="" -48px="" no-repeat;<="" div=""></div>

Pierdo las barras invertidas / y obviamente estoy haciendo algo mal con "" y ''.

Si hay una manera más "elegante" de hacerlo, siéntase libre de mostrarlo

Resultado esperado con vars:

<div class="img" style="height:48px; width:48px; background: url("//ddragon.leagueoflegends.com/cdn4.15.1/img/sprite/+data.freeWeekChampions[i].image.sprite+") -+data.freeWeekChampions[i].image.sprite.x+ px - +data.freeWeekChampions[i].image.sprite.x+px no-repeat;"</div>

Resultado esperado en html:

<div class="img " style="height:48px; width:48px; background: url('//ddragon.leagueoflegends.com/cdn/4.15.1/img/sprite/champion0.png') -96px -0px no-repeat;"></div>
0
user3127632 30 ago. 2014 a las 13:19

2 respuestas

La mejor respuesta

Olvidó una ":

$('#dataArea').html(' ');
            for (var i in data.area) {
                        $('#dataArea').append("" + data.area[i].name + "<div class=\"img \" style=\"height:48px; width:48px; background: url('//ddragon.leagueoflegends.com/cdn/4.15.1/img/sprite/" + data.area[i].image.sprite + ".png') -" + data.area[i].image.x + "px -" + data.area[i].image.w + "px no-repeat;\"></div>";)

                   }
1
Vinz243 30 ago. 2014 a las 09:54

Debe agregar una entidad html no solo una cadena html, intente esto:

var child, area = $('#dataArea');
for (var i in data.area) {
    child = $('<div>');//<-- change as per your need
    child.html(data.area[i].name +'<div class="img" style="height:48px; width:48px; background: url("//ddragon.leagueoflegends.com/cdn4.15.1/img/sprite/'+data.area[i].image.sprite +') -'+data.area[i].image.x+'px -'+data.area[i].image.w+'px no-repeat;</div>');
    area.append(child);
}
0
30 ago. 2014 a las 09:36