Question

嗨，我是jQuery的新手，我想更好地组织我的代码。

代码：

$(".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: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>');

        });
    });

你能解释一下我的工作是什么吗？

Answer 1

你忘了完成一些single quotes

试试，

  $(".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>');

        });
    });

Answer 2

多行字符串最后必须附加\。

    $(".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: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);
        });
    });

IMO更清洁，更易于维护。祝你好运！

Answer 3

为什么你在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>');

Answer 4

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

所以使用这样的用法：

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

jQuery代码，多行语法，有什么不对？

4 个答案: