追加为类属性时，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>