调用侦听器事件时 Javascript 数据不会持久

Question

如何将ruby数据持久化为javascript调用的事件

---

我遇到javascript变量问题。这可能是由于我对作用域和使用哪个变量缺乏了解，尽管我尝试了不同的变量类型。(这是我的第一段实际javascript代码(。我在javascript中看到作用域的方式是这样的：如果它是在函数中声明的，那么就不能在函数之外使用它。如果您首先声明它(在函数外(，您可以更新函数中的值，然后在外部使用它，稍后在不同的标记中使用它。我做到了。

我正在做的事情：我正在循环浏览从ruby模型中获得的一组名称，这里是：

<% @items.each do |record| %>

稍后在我的代码中，我打开了其中的另一个脚本html标签。each:

<script> edit_items("<%=record.name%>") </script>

这个"edit_items"函数为我提供了一个记录关系的所有名称的数组。(这在页面顶部声明(

y=[];
function edit_items(x){
y.push(x);
}

我循环浏览这些项目的原因是为每个项目创建侦听器(它们是为用户创建的，因此每个用户都有一个动态量(。我有一个带有li元素的ul，其中包含指向模式弹出窗口的链接(html在同一页上(。

我要做的是告诉javascript将模态中的输入值(#name_box(设置为单击的链接中的信息。虽然一个文本框有多个链接，所以我必须指定将哪个id发送到该框。页面底部：

$(document).ready(function() {
console.log("ready");
for (id = 0; id < y.length; id++){
console.log("starting li click events");
$("#" + y[id]).click(function () {
console.log("y: " + y[id]);
console.log("doc: " + document.getElementById(y[id]));
});
}
});

我正在为通过ruby数组中的动态数据创建的每个链接创建事件侦听器。问题是：只有当页面位于客户端时，才会运行单击操作。我认为您无法从客户端侦听器获取服务器端数据(ruby(。

当我点击链接时，我在console.log中得到了这个：

y: undefined
admin:318 doc: null
admin:317 y: undefined
admin:318 doc: null

这意味着，对我来说，y存在，但没有设置，doc没有值(找不到具有未定义数据的元素(。

Answer 1

问题不在于没有从ruby数组中持久化数据。问题是for循环id没有持久化到侦听器操作事件中。Duh这个动作将在for循环结束后运行。(它只是用数组的所有元素设置监听器(

将javascript代码编辑为：

$(document).ready(function() {
console.log("ready");
for (id = 0; id < y.length; id++){
$("#" + y[id]).click(function () {
let id = document.getElementById(this.id).id
document.getElementById("name_box").value = id
});
}
});

选择点击的元素的id(这意味着无论我是什么…在元素上下文中(，将名称框的值设置为id。Wallah！