Question

我有一些jQuery，其中我附加了一些文本，其中一些属性采用了一些js变量。

<script>
var className = "COS 102";
var teacher = "Bob Teacher";

$("#classesDiv").append("<div className="+className+" teacher="+teacher+" class='class'></div>");
</script>

我遇到的问题是，当我将这些变量传递给元素时，它看起来像className="COS"，没有102后。

有人知道为什么会这样吗？

Answer 1

因为您没有在属性值周围加引号。

您的代码将附加：

<div className=COS 102 ...

应该追加

<div className='COS 102' ...

这应该有效：

<script>
var className = "COS 102";
var teacher = "Bob Teacher";

$("#classesDiv").append("<div className='"+className+"' teacher='"+teacher+"' class='class'></div>");
</script>

Answer 2

考虑一下你附加的字符串：

<div className=COS 102 teacher=Bob Teacher class='class'></div>

由于这些属性值未被引用，102和Teacher被视为单独的无值属性。你想得到：

<div className='COS 102' teacher='Bob Teacher' class='class'></div>

引用：

$("#classesDiv").append("<div className='" + className + "' teacher='" + teacher + "' class='class'></div>");

或者，更多关于它的jQuery-ish：

$('<div>').
  attr({
    'className' : className,
    'teacher' : teacher
  }).
  appendTo($('#classesDiv'));

最后一种方法的一个优点：即使teacher或className 包含引号（单引号或双引号），或其他对HTML有意义的字符，它也能正常工作。

Answer 3

这种情况正在发生，因为您通过将字符串连接在一起构建元素。如您所见，这种方法很脆弱。通过将对象传递给jQuery的$函数来构造元素：

var className = 'COS 102';
var teacher = 'Bob Teacher';

$('<div>', {
    className: className,
    teacher: teacher,
    'class': 'class'
}).appendTo('#classesDiv');

此外，className和teacher等自定义属性也不是有效的HTML。您必须在前面添加data-：

$('<div>', {
    'data-className': className,
    'data-teacher': teacher,
    'class': 'class'
})

带空格的HTML属性值

3 个答案: