Javascript 隐藏单选按钮时，星级系统未正确更新

我使用本教程实施了星级评定系统

在显示页面和索引页面中，一切都正常工作，直到我隐藏单选按钮并使用相应的标签输入值。出于某种原因，Javascript只更新索引页面中的第一本书。当我点击其他图书评级时，它仍然只更新第一本书

只有当我使用标签提交值时才会发生这种情况，否则如果我不隐藏单选按钮，只要单击单选按钮就可以了

据我所知，我的标签可能都使用相同的ID，因为点击实际的单选按钮就可以了。在循环中运行时，如何使用标签选择单选按钮？？

rails新手请帮助：）

JAVASCRIPT

rating_.js

$(document).ready(function() {

    ### Makes stars glow on hover.
  $('form.rating_ballot > label').hover(
    function() {    // mouseover
        $(this).prevAll().andSelf().addClass('glow');
    },function() {  // mouseout
        $(this).siblings().andSelf().removeClass('glow');
  });

  ### Makes stars stay glowing after click.
  $('form.rating_ballot > label').click(function() {
    $(this).siblings().removeClass("bright");
    $(this).prevAll().andSelf().addClass("bright");
  });


  ### Submits the form & saves data. 
  ### But only with the first Book when i click on the label

  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });
});

CSS.SCSS

### The code doesn't work when i hide the radio buttons to display stars/labels

form.rating_ballot input.rating_button { display: none; }

form.rating_ballot label.rating { cursor: pointer; display: block; height: 20px; width: 20px; float: left; }
form.rating_ballot label.rating span { display: none; }
form.rating_ballot label.rating { background-image:  image-url('star-dim.png'); }
form.rating_ballot label.rating.bright { background-image:  image-url('star-bright.png'); }
form.rating_ballot label.rating.glow { background-image:  image-url('star-glow.png'); }

module BooksHelper

  def rating_ballot(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
       @rating.value
    end
  end

end

视图

### The code doesn't work when i hide the radio buttons to display stars/labels

form.rating_ballot input.rating_button { display: none; }

form.rating_ballot label.rating { cursor: pointer; display: block; height: 20px; width: 20px; float: left; }
form.rating_ballot label.rating span { display: none; }
form.rating_ballot label.rating { background-image:  image-url('star-dim.png'); }
form.rating_ballot label.rating.bright { background-image:  image-url('star-bright.png'); }
form.rating_ballot label.rating.glow { background-image:  image-url('star-glow.png'); }

module BooksHelper

  def rating_ballot(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
       @rating.value
    end
  end

end

show.html.erb（show）

开发者工具中的HTML代码

### The code doesn't work when i hide the radio buttons to display stars/labels

form.rating_ballot input.rating_button { display: none; }

form.rating_ballot label.rating { cursor: pointer; display: block; height: 20px; width: 20px; float: left; }
form.rating_ballot label.rating span { display: none; }
form.rating_ballot label.rating { background-image:  image-url('star-dim.png'); }
form.rating_ballot label.rating.bright { background-image:  image-url('star-bright.png'); }
form.rating_ballot label.rating.glow { background-image:  image-url('star-glow.png'); }

module BooksHelper

  def rating_ballot(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
       @rating.value
    end
  end

end

index.html.erb

###Before I open a Table

<table class="table id="book_574">_</table>
<table class="table id="book_575">_</table>
<table class="table id="book_576">_</table>

###After I open a the First Two Tables

<table class="table id="book_574">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1090" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1090" method="post">

        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓">
          <input name="_method" type="hidden" value="put">
          <input name="authenticity_token" type="hidden" value="JjueXU5L/l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM=">
        </div>

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input checked="checked" class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="574">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

<table class="table id="book_575">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1091" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1091" method="post">

        <div style="margin:0;padding:0;display:inline" class="bright">
          <input name="utf8" type="hidden" value="✓">
          <input name="_method" type="hidden" value="put">
          <input name="authenticity_token" type="hidden" value="JjueXU5L/l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM=">
        </div>

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input checked="checked" class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="575">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

在我打开表格之前 _ 标题 1. 2. 3. 4. 5.

---

您的单选按钮上有重复的

id

s，因此第二组

s将激活第一组单选按钮；在

元素上也有重复的

id

s，因此HTML是双重无效的。您可以在此处看到操作中的

问题：

点击黑匣子（那些是你的星星的占位符）并观察单选按钮，你会看到第二行框激活了第一行单选按钮

你需要一些东西使你的单选按钮

id

s独一无二。如果您只打算在每页每本书中包含一次您的

\u rating.html.erb

部分，那么您可以使用

book.id

，您已经为单选按钮创建了唯一的

id

s：

<% sfx = "value_#{blog.id}_1" %>
<%= f.label(sfx, content_tag(:span, '1'), :class => "rating") %>
<%= radio_button_tag("rating[value]", 1, current_user_rating(book.id) == 1, :class => 'rating_button', :id => "rating_#{sfx}") %>
...

“评级”）%>
'分级按钮'，：id=>“分级按钮”%>
...

---

在

s上很少需要

id

s，所以我也放弃了这些。这会让一切正常连接。

天哪，谢谢。我一直在做这件事。不过这是有道理的。感谢JSFIDLE的解释，它真的很有帮助。：）为什么会从0开始高亮显示，当我单击2时，它高亮显示1颗星。如果我点击3，它只会高亮显示到第二颗星。当我点击5时，它只会高亮显示第四颗星。其他一切都很好。我不确定你的意思，它是否发生在小提琴的例子中？是的，它确实发生在小提琴中。当我点击第三个单选按钮时。它只高亮显示两个黑色标签。同样的事情也发生在我的明星身上，那就是我对颜色的选择不当？浅灰色是“开”星，黑色是“关”星。这个版本的颜色更有意义吗？

<% sfx = "value_#{blog.id}_1" %>
<%= f.label(sfx, content_tag(:span, '1'), :class => "rating") %>
<%= radio_button_tag("rating[value]", 1, current_user_rating(book.id) == 1, :class => 'rating_button', :id => "rating_#{sfx}") %>
...