追加爲類屬性時，Javascript字符串按空格分割

Question

我試圖按如下方式動態地將類追加到<a>元素。

$(document).ready(function() { 
 
    var class = "abc def ghi"; 
 
    var url = "something"; 
 
    var innerText = "some random text"; 
 

 
    var innerLink = "<a href=" + url + "><i data-name=" + class + " class=" + class + "></i><span>" + innerText + "</span></a>"; 
 

 
    $("#test").append(innerLink); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 

 
</div>

串類可以有空格之間。當追加發生時，生成的字符串看起來像<a href="something"><i data-name="abc" def ghi class="abc"></i><span>some random text</span></a>

（檢查結果中的元素以查看它）。

，但我很期待是<a href="something"><i data-name="abc def ghi" class="abc def ghi"></i><span>some random text</span></a>

什麼是錯的代碼？

Answer 1

你需要有另一種包裝引號，如果值是分隔空間：

class='" + class + "'></i><span>" + 
// ^   ^------check this 

---

var innerLink = "<a href='" + url 
       + "'><i data-name='" + class + "' class='" + class + "'></i><span>" + 
innerText + "</span></a>"; //-----^-------------^-------^-------------^ 

Answer 2

你缺少類圍繞內部引號和name屬性。

$(document).ready(function() { 
 
    var class = "abc def ghi"; 
 
    var url = "something"; 
 
    var innerText = "some random text"; 
 

 
    var innerLink = "<a href=" + url + "><i data-name='" + class + "' class='" + class + "'></i><span>" + innerText + "</span></a>"; 
 

 
    $("#test").append(innerLink); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 

 
</div>