Question

当我尝试在以下函数中将字符串作为参数传递时，出现Uncaught SyntaxError: missing ) after argument list错误。它通过整数时工作正常。我很困惑，因为我读取的字符串必须作为参数传递，而不是整数。

HTML：

r.title = "The large item"
counter = <integer>

<% @items.each do |r| %>
  <p>Title: <%= r.title %></p>
  <p>Price: <%= r.price %></p>
  <p>Description: <%= r.description %></p>
  <p style="color:blue;" class="room_<%= counter %>" onclick='addItemToCart(<%= r.title %>, <%= counter %>)'>Select Item</p>
  <br>
  <br>
<% end %>

当我通过r.id代替r.title时，代码可以正常运行。

JavaScript的：

<script text/javascript>
  function addItemToCart(title, item_number){
    $("#" + item_number).append("<br>"+title);
  }
</script>

Answer 1

我认为你在字符串周围缺少引号。试试这个：

<p style="color:blue;" class="room_<%= counter %>"
   onclick='addItemToCart("<%= r.title %>", <%= counter %>)'>Select Item</p>

修改

要了解此问题，请尝试查看其输出的HTML。我想你会看到这样的事情：

<p style="color:blue;" class="room_123" onclick='addItemToCart(The large item, 123)'>Select Item</p>

希望从输出中可以看出缺失的引号。

Answer 2

我同意@smarx，但我认为这是将HTML，Javascript和Ruby片段混合在一起的典型示例，应该始终避免这种情况。

更好的方法是至少将Ruby片段与Javascript分开。

<强> ERB

<p style="color:blue;" class="room_<%= counter %>"
  data-title="<%= r.title %>"
  data-counter="<%= counter %>"
  onclick='addItemToCart(this)'>Select Item</p>

<强>的Javascript

function addItemToCart(element) {
  var title = element.dataset.title;
  var counter = element.dataset.counter;
  // ...
}

您可以看到我在HTML中添加了两个data-*属性，并在Javascript中读取它们。这似乎有点冗长，但它不那么意外，它清楚地将运行在服务器（Ruby）上的代码与运行在浏览器上的代码（Javascript）区分开来。

P.S。如果你正在使用jQuery，我强烈建议 NOT 使用onclick属性，因为它要求你定义全局函数。请改用$(...).click(fn)或$(...).on('click', fn)，因为它允许使用匿名非全局函数。

参数列表

2 个答案: