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刪除反斜槓

回答

相關問題