Hi i'm newbies in jQuery and I wanna better way for organize my code.
Code:
$(".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>');
});
});
Code after my better organize:
$(".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>');
});
});
Could you explain me what is no work please!
You just forgot to finish up some single quotes
Just Try,
$(".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>');
});
});
Multi-line strings must be appended with a \\
at the end.
$(".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>');
});
});
However if you want a more sufficient way to write your strings, here's something I generally do:
$(".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);
});
});
It's cleaner and easier to maintain, IMO. Good luck!
Why you have plus sign in html? MAybe that is the problem.
$('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>');
Javascript doesn't support New Lines "\\n" in string.
So use use like this:
var html = '\
<li class="elements-item">\
<span class="tog">\
</span>\
</li>';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.