具有ROR的Javascript可在div内容之间切换

Question

我正在尝试创建一个功能，用户可以在2个div内容之间切换：“关注者”或“待定”，并且两个按钮始终可见。

当我单击“待定”或“关注者”按钮时，Javascript不起作用。

资产/javascript/followers.js

$(document).ready(function(){
  var buttons = $("#buttons").find("a");
    $("buttons").click(function() {
      $(".load-pending").click(function() {
             $("#followers").css("display", "none");
             $("#pending").css("display", "block");
      });
      $(".load-followers").click(function() {
             $("#followers").css("display", "block");
             $("#pending").css("display", "none");
      });


    });
});

followers.html.erb

<div class = "container">
  <div id="buttons">
    <a href="#" class="load-followers">Followers</a>
    <a href="#" class="load-pending">Pending</a>
  </div>
  <div id= "followers">
    <% @followers.each do |follower| %>
       <%= render 'user', user: follower %>
     <% end %>
  </div>
  <div id="pending" style= "display:none">
    <% @requested_friendships.each do |request| %>
       <%= render 'user', user: request %>
     <% end %>
  </div>
</div>

Answer 1

$("buttons").click(function()

'＃' 失踪

$("#buttons").click(function() { 

Answer 2

由于“ .load-pending”和“ .load-followers”是<a>标记，因此您应禁用链接的默认操作（否则，单击将跳至哈希“＃”-页面的顶部）：

    $(".load-pending").click(function(e) {
      e.preventDefault();
    ...

    $(".load-followers").click(function(e) {
      e.preventDefault();
    ...

Answer 3

你不需要这个...

 $("buttons").click(function() { });

执行此操作时，您将分配一个单击事件到两个按钮。 该点击事件将为每个按钮分配新的点击事件。 （您使用类选择器编写的代码）。

您想完全删除该调用，并将其他调用直接放在$（document）.ready下。

这是一个工作中的JS小提琴...

https://jsfiddle.net/bhb5xqqq/1/

• 我将您的.css（）调用替换为.show（）和.hide（）-这不是必需的，但在我看来看起来更好。