嗨,我是 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>');
});
});
请你解释一下什么是无效工作!
最佳答案
多行字符串必须在末尾附加 \
。
$(".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);
});
});
在我看来,它更干净、更容易维护。祝你好运!
关于javascript - jQuery 代码,多行语法,有什么问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21228360/