Javascript jQuery代码，多行语法，what'；怎么了？

嗨，我是jQuery的新手，我想用更好的方式来组织我的代码

代码：

$（“.color-list.one-li:n子项（2）”）.on（'click'，function（）{
$.getJSON（“json/a2.json”，函数（数据）{
//处理好我的反应
$（'ul.elements list'）.html（'
'+data.name+''+data.info+'
'+data.size+'
'）；
$（'ul.elements list'）.append（'li class=“elements item”>'+data.name+''+data.info+'
'+data.size+'
'）；
});
});

在我的“更好的组织”之后编写代码：

    $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {
            //Handle my response
            $('ul.elements-list').html('
                <li class="elements-item"><span class="tog">' + data.name + '</span> +
                <div class="togcont hidden"><p>' + data.info + '</p> +
                <p>' + data.size + '</p></div></li>');

            $('ul.elements-list').append('
<li class="elements-item"><span class="tog">' + data.name + '</span>
<div class="togcont hidden"><p>' + data.info + '</p>
<p>' + data.size + '</p></div></li>');

        });
    });

$（“.color-list.one-li:n子项（2）”）.on（'click'，function（）{
$.getJSON（“json/a2.json”，函数（数据）{
//处理好我的反应
$（'ul.elements list'）.html（'
“+data.name+”+
“+data.info+”
+
“+data.size+”
）；
$（'ul.elements list'）。追加（'
“+data.name+”
“+data.info+”

“+data.size+”
）；
});
});

---

你能给我解释一下什么是不工作吗

你只是忘了完成一些

单引号

试试看

  $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {
            //Handle my response
            $('ul.elements-list').html('
                <li class="elements-item"><span class="tog">' + data.name + '</span>' +
                '<div class="togcont hidden"><p>' + data.info + '</p>' +
                '<p>' + data.size + '</p></div></li>');

            $('ul.elements-list').append('
<li class="elements-item"><span class="tog">' + data.name + '</span>' +
'<div class="togcont hidden"><p>' + data.info + '</p>' +
'<p>' + data.size + '</p></div></li>');

        });
    });

$（“.color-list.one-li:n子项（2）”）.on（'click'，function（）{
$.getJSON（“json/a2.json”，函数（数据）{
//处理好我的反应
$（'ul.elements list'）.html（'
'+data.name+'+
“”+data.info+”
”+
“”+data.size+”
）；
$（'ul.elements list'）。追加（'
'+data.name+'+
“”+data.info+”
”+
“”+data.size+”
）；
});
});

多行字符串必须在末尾附加一个

\

    $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {
            //Handle my response
            $('ul.elements-list').html('\
                <li class="elements-item"><span class="tog">' + data.name + '</span> +\
                <div class="togcont hidden"><p>' + data.info + '</p> +\
                <p>' + data.size + '</p></div></li>');

            $('ul.elements-list').append('\
<li class="elements-item"><span class="tog">' + data.name + '</span>\
<div class="togcont hidden"><p>' + data.info + '</p>\
<p>' + data.size + '</p></div></li>');

        });
    });

$（“.color-list.one-li:n子项（2）”）.on（'click'，function（）{
$.getJSON（“json/a2.json”，函数（数据）{
//处理好我的反应
$（'ul.elements list'）.html（'\
“+data.name+”+\
“+data.info+”
+\
“+data.size+”
）；
$（'ul.elements list'）。追加（'\
“+data.name+”\
“+data.info+”
\
“+data.size+”
）；
});
});

但是，如果您想要一种更充分的方式来编写字符串，我通常会这样做：

    $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {

            var r = '<li class="elements-item">';
                    r += '<span class="tog">' + data.name + '</span>';
                    r += '<li class="elements-item">';
                        r += '<span class="tog">' + data.name + '</span>';
                        r += '<div class="togcont hidden">';
                            r += '<p>' + data.info + '</p>';
                            r += '<p>' + data.size + '</p>';
                        r += '</div>';
                    r += '</li>';
            //Handle my response
            $('ul.elements-list').html(r);

            var v = '<li class="elements-item">';
                    v += '<span class="tog">' + data.name + '</span>';
                    v += '<div class="togcont hidden">';
                        v += '<p>' + data.info + '</p>';
                        v += '<p>' + data.size + '</p>';
                    v += '</div>';
                v += '</li>';

            $('ul.elements-list').append(v);
        });
    });

$（“.color-list.one-li:n子项（2）”）.on（'click'，function（）{
$.getJSON（“json/a2.json”，函数（数据）{
var r='
'；
r+=''+data.name+''；
r+='
'；
r+=''+data.name+''；
r+=''；
r+=''+data.info+'
'；
r+=''+data.size+'
'；
r+=''；
r+='
'；
//处理好我的反应
$（'ul.elements list'）.html（r）；
var v='
'；
v+=''+data.name+''；
v+=''；
v+=''+data.info+'
'；
v+=''+data.size+'
'；
v+=''；
v+='
'；
$（'ul.elements list'）。追加（v）；
});
});

---

它更干净，更容易维护，祝你好运

为什么在html中有加号？也许这就是问题所在

 $('ul.elements-list').html('
            <li class="elements-item"><span class="tog">' + data.name + '</span> **+**
            <div class="togcont hidden"><p>' + data.info + '</p> **+**
            <p>' + data.size + '</p></div></li>');

$（'ul.elements list'）.html（'
“+data.name+”**+**
“+data.info+”
**+**
“+data.size+”
）；

Javascript不支持字符串中的新行“\n”

所以像这样使用：

var html = '\
<li class="elements-item">\
<span class="tog">\
</span>\
</li>';

var-html=\
\
\
\
'；

您能同时粘贴

数据吗。。
浏览器控制台
显示了什么？如何格式化代码，是一个品味问题，也是个人的选择。根据您的感觉对代码进行格式化，和/或您可以尝试阅读正在编写的编程语言的转换。可能重复@downvoter:请提供您的downvote的原因。这样我就可以纠正我的错误。做得很好，只需在“html”后面加上一个引号（“太棒了，只是做了我想做的事情！除了回答我的问题之外，没有问你更多的问题，非常感谢
var html = '\
<li class="elements-item">\
<span class="tog">\
</span>\
</li>';