Question

我有一个模型Subrating的投票系统，如果用户通过点击图标进行投票，那么他的IP地址会被添加到列表中，这会阻止他再次投票，并且空白投票图标被替换为绿色投票图标，两者都在单独的div中定义。我想解释这个过程。我已经想出如何使用Ajax更新投票计数，但有没有办法在点击按钮时切换投票图标div？

以下是我目前的情况：说我想将<div id="<%= subrating.name %>upz">切换为<div id="voted">。

视图/东西/ show.html.erb：

    <% if ((!@subratingip.include? request.remote_ip) && (!@subratingunip.include? request.remote_ip)) %>
      <div id="subratings" >
        <div id="<%= subrating.name %>"><%= number_to_percentage(subrating.rating, precision: 0) %></div>
        <div id="<%= subrating.name %>upz">
          <a id="<%= subrating.name.downcase %>_link"><%= link_to image_tag("UpArrowGray.png", alt: "votedown", class: 'uparrowsub' ), upvote_subrating_path(:id => subrating.id), method: :get %></a>
        </div>
        <script type="text/javascript">
          $("#<%= subrating.name.downcase %>_link").click(function () {
            $.get( "<%= upvote_subrating_path(:id => subrating.id) %>", function( data ) {
              $('#<%= subrating.name %>').html(data + ' %');
            });
          });
        </script>

控制器/ subratings_controller.rb

  def upvote
    @subrating = Subrating.find(params[:id])
    UpVote.create!(ip: request.remote_ip, vanishing: false, voteable_id: params[:id], voteable_type: 'Subrating')
    redirect_to @subrating.thing
    render text: ((@subrating.up_votes.count.to_f + 2).to_f / (@subrating.up_votes.count.to_f + @subrating.down_votes.count.to_f + 3 ).round(1).to_f * 100).to_s
  end

Answer 1

尝试将此行$("#<%= subrating.name %>upz).attr("id", "voted");添加到您的点击中，这会更改div的ID。但是，您似乎是根据div内的内容设置图像，这意味着您应该删除/隐藏div＃upz并添加/显示div＃voted。

<script type="text/javascript">
      $("#<%= subrating.name.downcase %>_link").click(function () {
        $.get( "<%= upvote_subrating_path(:id => subrating.id) %>", function( data ) {
          $('#<%= subrating.name %>').html(data + ' %');
        });
        $("#<%= subrating.name %>upz").attr("id", "voted");
      });
    </script>

Answer 2

更好的解决方案是使用基于类的选择器和CSS。

<div id="subratings">
    <div class="subrating">
        <ul class="actions">
            <li class="upvote"><%= link_to("Upvote", upvote_subrating_path(subrating)) %></li>
            <li class="downvote disabled"><%= link_to("Downvote", downvote_subrating_path(subrating)) %></li>
        </ul>
    </div>
</div>

我也一般强烈建议不要混合ERB＆amp; JavaScript的。将您的JavaScript放入单独的资产文件中。否则你经常会得到HTML，javascript和ruby的污点，其中ajax调用在圈内运行。

// This delegates an event handler to any link in div.actions 
$('.subrating .actions').on('click', 'a', function(event){
    var $link = $(this);
    var $actions = $link.parents('.actions');

    if (!$link.attr('disabled')) {
        var promise = $.get( $obj.attr('href') );
        promise.done(function(){
            $actions.children('.upvote, .downvote').toggleClass('disabled');
            $actions.find('a').not($link).removeAttr( 'disabled' );
            $link.attr('disabled', 'disabled');
        });
    }

    event.preventDefault();

});

Answer 3

实际上我发现我只能将图像插入为html：

    <script type="text/javascript">
      $("#<%= subrating.name.downcase %>_link").click(function () {
        $.get( "<%= upvote_subrating_path(:id => subrating.id) %>", function( data ) {
          $('#<%= subrating.name %>').html(data + ' %');
          $('#<%= subrating.name %>'upz).html( '<%= image_tag("UpArrowGreen.png" %>');
        });
      });
    </script>

我可以使用Ajax来切换div吗？

3 个答案: