Question

我正在设计一个存储运动游戏的应用程序。现在在我的通知中我有一个要确认的游戏列表，在我的列表中我有读取和未读取的类选项以及确认游戏的操作。现在当有人确认游戏时我不想刷新页面，但是这个类应该在读取时改变，按钮应该消失。

    <ul class="notification-body">  
    <% @games.each do |game| 
                    #CONTROLE OP VERWIJDERDE USERS

                    home_user_name = if game.home_user.present?
                        game.home_user.username
                    else
                         t :deleted_user 
                    end 

                    away_user_name = if game.away_user.present?
                        game.away_user.username
                    else
                         t :deleted_user 
                    end 

  %>

        <!-- LOST GAMES -->
            <li class="unread">
                <span>
                <p class="msg">

                  <% if game.home_user.avatar_url.present? %>

                      <%= image_tag(game.home_user.avatar_url, class: 'air air-top-left margin-top-5', width: '50', height: '50') %>

                  <% elsif game.home_user.uid.present? %>

                      <%= image_tag(game.home_user.largeimage, class: 'air air-top-left margin-top-5', width: '50', height: '50') %>

                  <% else %>

                      <%= image_tag(asset_path('picempty.jpg'), class: 'air air-top-left margin-top-5', width: '50', height: '50') %>

                  <% end %>


                        <span class="from"><% if game.loser_user == game.home_user %>Game Won<% else %>Game Lost<% end %> </span>

                        <time><%= time_ago_in_words(game.created_at) %> ago</time>

                        <span class="subject"><%= home_user_name %> <% if game.loser_user == game.home_user %> lost <% else %>won  <% end %> the game with  <%= game.home_score %> - <%= game.away_score %></span>



                        <span class="msg-body">   
                                <%= link_to  game_confirm_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>

                                    <button class="btn btn-xs btn-success margin-top-5"> <i class="fa fa-check" aria-hidden="true"></i> Confrim</button>

                              <% end %>

                               <%= link_to game_conflict_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>

                                    <button class="btn btn-xs btn-warning margin-top-5"> <i class="fa fa-flag" aria-hidden="true"></i> Flag</button>

                              <% end %>

                         </span>
                </p>        

                </span>
            </li>

    <% end %>
</ul>
<% content_for :scripts do %>
  <script>

$('li a').click(function () {
   // remove existing active class inside li elements
   $('li.unread').removeClass('unread');
  // add class to current clicked element
   $(this).addClass('read');
});

</script>
<% end %>

有人可以帮我解决这个Javascript问题吗？我在Javascript中是一个菜鸟很抱歉，如果这是一个愚蠢的问题。

一点回顾：

当

<%= link_to  game_confirm_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>

<button class="btn btn-xs btn-success margin-top-5"> <i class="fa fa-check" aria-hidden="true"></i> Confrim</button>

<% end %>

单击此按钮，它应该消失并且

<li class="unread">

应该改为

<li class="read">

Answer 1

您可以使用jQuery hide()

隐藏按钮

$('li a').on('click', function(e){
	e.preventDefault();
	$(this).parent('li').removeClass('unread').addClass('read')
	$(this).hide();
})

li{
	list-style: none;
	margin: 10px 0;
	padding: 10px 0;
}

.button{
	padding: 5px 10px;
	border: 1px solid #ccc;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttons</title>
</head>
<body>
<ul>
		<li class="unread"><a class="button" href="#">Button</a></li>
		<li class="unread"><a href="#" class="button">Button</a></li>
		<li class="unread"><a href="#" class="button">Button</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>	
</body>
</html>

Answer 2

$('body').on('click', '.unread', function() {
  $(this).addClass('read');
  $(this).removeClass('unread');
});

由于

使用Javascript for rails循环更新<li>元素类

2 个答案: