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

我认为您的代码唯一的问题是您的可读性问题。所以我建议请改进它。让我们来看看吧。 My code example @ 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]); 
}

试图动态拆分字符串不断收到错误？

2 个答案: