jQuery追加与CSS删除反斜杠

我想了几个小时来解决这个问题，我在一种死胡同。jQuery追加与CSS删除反斜杠

我有这个代码块从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>

我失去了反斜杠/显然我做错了“”和“'。

如果有更多的 “优雅” 的方式来做到这一点随意表现出来

预期结果与增值经销商：

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

来源

2014-08-30 user3127632

你想干什么？您可以张贴在小提琴 – 2014-08-30 09:24:13

你忘了"：

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

        }

来源

2014-08-30 09:28:00 Vinz243

我仍然得到这样的：

– user3127632 2014-08-30 09:32:23

请用{} – Vinz243 2014-08-30 09:33:32

@ user3127632中的变量给我们预期的结果请参阅编辑 – Vinz243 2014-08-30 09:35:53

你必须追加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); 
}

来源

2014-08-30 09:24:58 Arvind

你的代码中，我得到一个未捕获的错误：语法错误，无法识别的表达：

– user3127632 2014-08-30 09:34:05

@ user3127632，请检查我的更新后 – Arvind 2014-08-30 09:36:45

我还是老样子得到我最初的结果没有反斜杠：/ – user3127632 2014-08-30 09:43:51

这行代码是如此复杂。它将继续成为错误的来源！

这可能是更好的打造你想要在一个更可读的方式来追加

喜欢的东西

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

以上的元素是一个很大的可读性和容易地更改。

干杯

来源

2014-08-30 11:27:15

jQuery追加与CSS删除反斜杠

回答

相关问题