我正在尝试将类附加到 <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>
代码有什么问题?
最佳答案
如果值为空格 分隔,则需要另一个包装引号:
class='" + class + "'></i><span>" +
// ^ ^ ------check this
var innerLink = "<a href='" + url
+ "'><i data-name='" + class + "' class='" + class + "'></i><span>" +
innerText + "</span></a>"; //-----^-------------^-------^-------------^
关于附加为类属性时,Javascript 字符串按空格分隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35225109/