divコンテンツを切り替えるRORを使用するJavascript

Question

2つのdivコンテンツ（「followers」または「pending」）をユーザーが両方のボタンで常に表示できる機能を作成しようとしています。

「保留中」または「フォロワー」ボタンをクリックするとJavascriptが機能しません。 .LOAD-保留「以来

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

Answer 1

あなたはこれを必要としませんが...

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

これを行うと、両方のボタンにクリックイベントが割り当てられます。そのクリックイベントは、各ボタンに新しいクリックイベントを割り当てます。 （あなたがクラスセレクタで書いたもの）。

あなたは完全にその呼び出しを削除し、直接$（文書）の下で他の人を残したいがここ

を.ready作業JSフィドルです...

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

• 私はあなたを置換.css（）は.show（）と.hide（）を呼び出します。これは必ずしも必要ではありません。

Answer 2

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

をfollowers.js '＃' "および" .load-followers "は< a>タグであり、あなたは、リンクのデフォルトのアクションを無効にする必要があります（それ以外の場合は、「＃」をハッシュするクリックでジャンプします - ページの最上部）：

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

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

Answer 3

を逃す

資産/ javascriptの/

$(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>