Question

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

点击＆＃34;待定＆＃34; Javascript无效或＆＃34;粉丝＆＃34;按钮。

资产/ 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()

＆＃39;＃＆＃39;缺少

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

Answer 2

因为“.load-pending”和“.load-followers”是＆lt;一个＆GT;标签，你应该禁用链接的默认动作（否则它将跳转点击以哈希“＃” - 页面的最顶部）：

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

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

Answer 3

你不需要这个......

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

执行此操作时，您将为两个按钮分配单击事件。该click事件将为每个按钮分配新的单击事件。（你用类选择器写的那些）。

您想要完全删除该呼叫，并将其他呼叫直接留在$（document）.ready

下

这是一个有效的JS小提琴...

From the horse's mouth

我用你的.css（）调用.show（）和.hide（）代替了 - 这不是必要的，但在我看来看起来更好。

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

3 个答案: