从 javascript 函数获取返回到 html 属性答案

【问题标题】：Get return from javascript function to html attribute从 javascript 函数获取返回到 html 属性
【发布时间】：2020-03-26 17:14:57
【问题描述】：

我的观点中有这段代码

  <%= link_to rating_book_path(@book, :rate => HERE_I_WANT_THE_SCORE_RETURNED_BY_FUNCTION), style: "text-decoration: none;" do %>
     <div id="rating" data-score="1" onclick="getScore();"></div>
  <% end %>
 <script>
    $(document).ready(function() {
      $('#rating').raty('reload'); //Previene el error de que al volver atras o ir adelante se muestren más estrellas de las debidas
        $('#rating').raty({
            path: '/assets/'
        });
    })
    function getScore(){
      return $('#rating').raty('score');
    }
  </script>

我需要的是函数 getScore() 返回的值被放置在 :rate => 符号旁边，因此指向它的重定向链接类似于：/books/5/rating_book?rate=THE_VALUE_RETURNED_BY_THE_FUNCTION（即：/books/5/rating_book?rate=3）

也许可以帮助将 ruby 助手翻译成 html，如下所示：

<a style="text-decoration: none;" href="/books/5/rating_book?rate=5">
     <div id="rating" data-score="1" onclick="getScore();" style="cursor: pointer;">
     <img alt="1" src="/assets/star-on.png" title="bad">&nbsp;
     <img alt="2" src="/assets/star-off.png" title="poor">&nbsp;
     <img alt="3" src="/assets/star-off.png" title="regular">&nbsp;
     <img alt="4" src="/assets/star-off.png" title="good">&nbsp;
     <img alt="5" src="/assets/star-off.png" title="gorgeous">
     <input name="score" type="hidden" value="1"></div>
</a>

提前致谢！

【问题讨论】：

标签： javascript jquery html ruby-on-rails ruby

【解决方案1】：

我解决了这个问题：

    function getScore(){
      var hrefAttr = document.getElementById("rating-link").getAttribute("href"); // /books/5/rating_book?rate=5
      var hrefTrunk = hrefAttr.slice(0, hrefAttr.length-1); // /books/5/rating_book?rate=
      console.log(hrefTrunk + $('#rating').raty('score')); // DEBUG: concat with new score
      document.getElementById("rating-link").setAttribute("href", hrefTrunk + $('#rating').raty('score'));
    }

我添加了id: "rating-link"，就像link_to 的一个属性

【讨论】：

【解决方案2】：

<%= link_to rating_book_path(@book, :rate => HERE_I_WANT_THE_SCORE_RETURNED_BY_FUNCTION), style: "text-decoration: none;" do %>
  <div id="rating" data-score="1"></div>
<% end %>

<script>
  $(document).ready(function() {
    $('#rating').raty('reload'); //Previene el error de que al volver atras o ir adelante se muestren más estrellas de las debidas
    $('#rating').raty({
      path: '/assets/'
    });

    $("#rating img").mouseover(function(){
      $('#rating').data('score', this.alt)
    });

    $('#rating').click(function(){
      return $('#rating').raty('score');
    });
  });
  </script>

【讨论】：