Question

当前我有此代码

function myFunction(arr)
{
 var out = "<br />";
 var i;

 if(arr.length > 0)
 {
  for(i = 0; i < arr.length; i++)
  {
   out += "<div class='address container-fluid card svs-map-add' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'>" + arr[i].display_name + "</div>";
  }
  document.getElementById('results').innerHTML = out;
 }
 else
 {
  document.getElementById('results').innerHTML = "Sorry, no results...";
 }

}

如您所见，我正在传递2个变量，它包含latitude和longitude

onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'

这些变量将转到函数chooseAddr

当前运行正常

但是现在我需要包含1 more变量，它是

arr[i].display_name

Uncaught SyntaxError: Unexpected end of input

我现在所做的是

  onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ", \'" + arr[i].display_name + "\');return false;'

但是该语法有错误

由于该变量为display_name，我该如何传递String

Answer 1

如果您查看SO re-line JS的一些问题，最常见的问题之一是在将变量添加到混合中时，引号/转义引号是如何工作的。与其解释问题出在哪里，还不如说是解决您问题的更现代的方法。

想法是您将JS与HTML分开，并使用data attributes来包含特定于元素的数据。此外，您将事件侦听器添加到catch clicks的父元素中，并调用chooseAddr函数来处理所单击元素的数据。

const arr = [{ lat: 1, lng: 1, display_name: "Rita" }, { lat: 2, lng: 2, display_name: "Sue" }, { lat: 3, lng: 3, display_name: "Bob" }];

// We create some HTML by using `map` to iterate over the array
// and return a string (we're using a template literal here for convenience)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
// We add the lat/lng data as data attributes on the div.
const html = arr.map((el) => {
  return `
    <div data-lat="${el.lat}" data-lng="${el.lng}" class="address container-fluid card svs-map-add" title="Show Location and Coordinates">
      ${el.display_name}
    </div>
  `;

// `map` returns an array so don't forget to `join` it up into a string
}).join('');

// We've created a parent element called "wrapper", so we need
// a) to pick it up
const wrapper = document.querySelector('.wrapper')

// b) add the HTML inside it
wrapper.insertAdjacentHTML('beforeend', html);

// c) add a listener to it to listen for clicks (that bubble
// up the DOM) and call `chooseAddr`
wrapper.addEventListener('click', chooseAddr, false);

function chooseAddr(e) {

  // Destructure the lat/lng data from the dataset of
  // the target (the element that was clicked)
  const { target: { dataset: { lat, lng } } } = e;
  console.log(lat, lng);
}

<div class="wrapper" />

我很高兴能接受很多建议，但是如果您在代码中使用关注点分离，则会发现它易于管理。我希望这会有所帮助。

进一步阅读

数据属性1 2
Dataset
map，join，insertAdjacentHTML，addEventListener
Template literals
Destructuring assignment

Answer 2

您可以将其作为单独的参数传递

int

现在您需要在脚本中对其进行处理

<input type="button" value="test" onclick='chooseAddr( param1 + ", " + param2,  "param3" );return false;'/>

// or pass in array
<input type="button" value="test" onclick='chooseAddr1( "param1" + ", " + "param2" + ", test" );return false;'/>

Answer 3

您可以使用反引号和$ {};以更好的方式添加字符串。

示例：

var myString = `Some text ${someVariable}`

以下是Codepen的示例： codepen

Answer 4

out += "<div class='address container-fluid card svs-map-add' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ",\""+arr[i].display_name+"\");return false;'>"+arr[i].display_name+"</div>"

这应该有效

onclick中有多个var：字符串和整数

4 个答案:

进一步阅读