尝试动态分割字符串时总是出现错误

Question

我正在尝试分割我传入

的字符串

$("#groupUL").append("<li>" + "<h2>About Item:</h2> " + response.data[i].message + "<br /> " + "<h2>Posted By:</h2> <a href='#' onclick='splitName('" + response.data[i].from.name + "');'>" + response.data[i].from.name + "</a>" +  "<br />");

似乎传递给我错误

SyntaxError: syntax error
splitName(

不知道这是怎么错的…下面是splitname函数

function splitName(txt){
    var myString = txt;
    var mySplitResult = myString.split(" ");
    console.log("The first element is " + mySplitResult[0]); 
    console.log("<br /> The second element is  " + mySplitResult[1]); 
    console.log("<br /> The third element is  " + mySplitResult[2]); 
};

Answer 1

当你在引号中加上引号，并试图正确地转义时，很难把它写对。你搞错了。

一个解决方案是把它分成小块:

var action = "splitName('" + response.data[i].from.name + "');";
$("#groupUL").append("<li>" + "<h2>About ... onclick=""+action+"">..."); 

但最好的解决方案是遵循最佳实践，即不内联javascript，而是使用jQuery的绑定函数:

$("#groupUL").append("... <a id=myid ..."); 
$("#myid").click(function(){ splitName(response.data[i].from.name) });

Answer 2

我认为你的代码唯一的问题是你的可读性问题。所以我建议你改进一下。让我们看一看。我的代码示例@ JSbin.

下面是代码:-(我认为更好)

var response = {
  data : {
    message: 'Cleaning code',
    from: {
      name: 'Clean Code works'
    }
  }
};

var li = $('<li>'); //Create empty li (Not Appending to DOM now due to performance issues)
$('<h2>').html('About Item:' + response.data.message + '<br />').appendTo(li);
$('<h2>').html('Posted By:').appendTo(li);
$('<a>').attr('href', '#')
  .html(response.data.from.name)
  .appendTo(li)
  .click(function() {
    splitName(response.data.from.name);
  });
$('<br>').appendTo(li);
// Append li to ul (Final operation to DOM)
li.appendTo('#groupUL');
function splitName(txt){
    var myString = txt;
    var mySplitResult = myString.split(" ");
    console.log("The first element is " + mySplitResult[0]); 
    console.log("The second element is  " + mySplitResult[1]); 
    console.log("The third element is  " + mySplitResult[2]); 
}