Question

我正在努力解决这个问题需要几个小时才能解决这个问题。

我有一大堆代码从spritemap生成一个拇指图像，解析一个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>')
               }

（变量名仅用于演示）

我得到的结果是例如

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

我丢失了反斜杠/显然我做错了＆＃34;＆＃34;和＆＃39;＆＃39;。

如果有更多＆＃34;优雅＆＃34;这样做的方式随意显示

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>

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>

Answer 1

这行代码太复杂了。它将继续成为错误的来源！

最好以更易读的方式构建要追加的元素

像

这样的东西

var element = $("<div />");
element.addClass("img");
element.css("background-image", "url('image-url')");
...
$dataArea.append(element);

以上内容更易读，更容易更改。

干杯

Answer 2

您忘记了"：

$('#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>";)

                   }

Answer 3

你必须追加一个html实体而不仅仅是html字符串，试试这个：

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

jQuery追加css删除反斜杠

3 个答案: