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

Question

我想将 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 的新手。我的大部分经验都在 angular 中，这似乎使这更容易..

目前，我得到 "scope is not defined"。但是，如果我在 bootstrap 工具提示上设置 scope.name，我可以让它显示在与工具提示关联的 div 之上。

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

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

Answer 1

错误：

scope is not defined

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

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

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

修复：

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

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

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

Trouble passing Rails Data into a JavaScript Function on mouse over..? Failed attempt:

javascript

jquery

ruby-on-rails

haml