jQuery代碼，多行語法，出了什麼問題？

嗨，我是jQuery的新手，我想更好地組織我的代碼。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>'); 

     }); 
    });

你能解釋我什麼是沒有工作，請！

來源

2014-01-20 GilbertOOl

可以粘貼你的'data'以及..什麼是'瀏覽器console'說明了什麼？ –

你如何格式化代碼，是一個品味和個人選擇的問題。您可以根據自己的意願對代碼進行格式化，或者您可以嘗試閱讀正在編寫的編程語言的轉換。 – Vallentin

[在JavaScript中創建多行字符串]的可能重複（http://stackoverflow.com/questions/805107/創建多行字符串在JavaScript中） –

多行字符串必須以\在年底追加。

$(".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。祝你好運！

來源

2014-01-20 07:29:11

）驚人的，只是做了我想做的事情！沒有問你更多的回答我的問題，非常感謝 – GilbertOOl

你忘記了，完成了一些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>'); 

     }); 
    });

來源

2014-01-20 07:28:31

@downvoter：請提供你downvote的原因。這樣我才能糾正我的錯誤。 –

工作正常，只是單引號後「html（」 – GilbertOOl

爲什麼你有加號登錄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>');

來源

2014-01-20 07:29:37 sandris

JavaScript不支持字符串中的新行「\ n」。

因此，使用使用這樣的：

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

來源

2014-01-20 07:29:51

jQuery代碼，多行語法，出了什麼問題？

回答

相關問題