来自数据属性的值在双引号之外

Question

我正在尝试使用数据属性向 table 添加附加信息。这适用于前两个属性，但不适用于 data-makeModelDescription、data-firstRegistration 和 data-mileage。在这里我得到输出

<tbody data-set="0"
       data-url="http://127.0.0.1:8888/selfstudy/projects/ad/res/test/212302246.php"
       data-makemodeldescription="Corvette" c5="" cabrio=""
       data-firstregistration="EZ" 03="" 2001="" data-mileage="96.000" km="">

但应该是：

<tbody data-set="0"
       data-url="http://127.0.0.1:8888/selfstudy/projects/ad/res/test/212302246.php"
       data-makemodeldescription="Corvette c5 cabrio"
       data-firstregistration="EZ 03/2001"
       data-mileage="96.000 km">

来源：

$.each(response, function(key, value) {
    $('#table__cars').append('<tbody 
        data-set='+key+' 
        data-url='+value.carDetailsURL+' 
        data-makeModelDescription='+value.makeModelDescription+' 
        data-firstRegistration='+value.firstRegistration+' 
        data-mileage='+value.mileage+'></tbody>');

有没有其他人也遇到同样的问题？如何调试此观察的任何提示也很棒。我用 console.log() 来检查 e. G。 value.mileage 的值是正确的，确实如此。就在我将它用作数据属性的值时，我得到了这个奇怪的输出。

Answer 1

你得到的是正确的，因为你用 space 写值而不是在你的代码中使用引号。你应该使用

$.each(response, function(key, value) {
    $('#table__cars').append('<tbody 
        data-set="'+key+'" 
        data-url="'+value.carDetailsURL+'" 
        data-makeModelDescription="'+value.makeModelDescription+'" 
        data-firstRegistration="'+value.firstRegistration+'" 
        data-mileage="'+value.mileage+'"></tbody>');

由于您使用的是简单的字符串连接，因此当未引用时，新项目将被理解为新的 empty attributes。看这个例子：

var val = "test foo bar";
$('#table__cars').append('<tbody data-val=' + val + '>');

这与所说的完全相同：

$('#table__cars').append('<tbody data-val=test foo bar>');

HTML 解析器通常希望属性具有值，因此显示为空：

<tbody data-val="test" foo="" bar="">

这就是需要引号的原因，尽管 quotes are not required in certain cases，我还是建议始终使用引号。否则一切都可能在测试中工作，但稍后当某些值具有 space 时它会中断。

另外 HTML 5 之前的版本将需要对属性值加引号。

来自数据属性的值在双引号之外

Values from data-attribute are outside of the double qotes

jquery

html

custom-data-attribute