在鼠标悬停时将 Rails 数据传递到 JavaScript 函数时遇到问题..？尝试失败：答案

【问题标题】：Trouble passing Rails Data into a JavaScript Function on mouse over..? Failed attempt:在鼠标悬停时将 Rails 数据传递到 JavaScript 函数时遇到问题..？尝试失败：
【发布时间】：2015-04-30 07:12:14
【问题描述】：

我想将 Rails 中的数据传递给 javascript 函数。

最终目标是以特定 ID 显示此数据

这是我目前失败的尝试：

    - if @scopes_in_common.any?
  .compare-box
    - @scopes_in_common[0..2].each_with_index do |scope, index|
      - v_score = instance_variable_get("@#{snake_case(scope.name)}_comparison").v_score.gsub("%", "").to_i
      - (index+1).odd? ? direction = "left" : direction = "right"
      .compare-hex{class: "#{comparison_color(v_score)}-hex"}
        .v_score{class: "#{comparison_color(v_score)}-inner"}
          %a.compare-text{:onmouseover => "showVscore(scope.name)"}
            = v_score

  #VscoreDisplay

:javascript
   function showVscore(scope){
    var Vs = document.getElementById('#VscoreDisplay');
    console.log('SCOPE.NAME', scope);
    Vs.innerHTML = Vs.innerHTML + scope;
  }

Rails 新手。我的大部分经验都是有角度的，这似乎让这更容易..

目前，我得到“未定义范围”。但是，如果我在引导工具提示上设置 scope.name，我可以让它显示在与工具提示关联的那个 div 上。

但是，我想将鼠标悬停在“.compare-text”上，它显示特定类别的分数，然后我想让该类别的名称“scope.name”出现在下方：“#VscoreDisplay ”。

或者，将与 .compare-text 相关的名称附加到#VscoreDisplay。

【问题讨论】：

您能解释一下目前正在发生的事情以及预期的结果吗？你有任何错误吗？
是的。目前，我得到“范围未定义”。但是，如果我在引导工具提示上设置 scope.name，我可以让它显示在与工具提示关联的那个 div 上。
但是，我想将鼠标悬停在“.compare-text”上，它显示特定类别的分数，然后我想让该类别的名称“scope.name”出现在下面，内：“#VscoreDisplay”。

标签： javascript jquery ruby-on-rails haml

【解决方案1】：

错误：

范围未定义

所以您需要检查将作用域作为参数传递给 JS 函数的行

%a.compare-text{:onmouseover => "showVscore(scope.name)"}

如果您查看这一行，您正在向函数传递一个字符串，而不是作用域对象的名称属性。

修复：

查看您的代码，我认为您正在使用 Haml，因此您可以通过以下方式修复它：

%a.compare-text{:onmouseover => "showVscore(#{scope.name})"}

【讨论】：

太棒了。语法有点不对劲。但是，这是有道理的： %a.compare-text{:onmouseover => "showVscore('#{scope.name}')"}
@stanleytd 为什么需要将 name 属性转换为字符串？不是已经是字符串了吗？
出错了。我相信这是说未定义特定类别，因此它没有传递范围，而是试图传递特定类别的名称。我想这与实例变量在 rails 中的传递方式有关。