Javascript Rails-活动的隐藏选项_Javascript_Jquery_Html_Ruby On Rails

Javascript Rails-活动的隐藏选项

javascript jquery html ruby-on-rails

Javascript Rails-活动的隐藏选项,javascript,jquery,html,ruby-on-rails,Javascript,Jquery,Html,Ruby On Rails,因此，我想为我的应用程序实现一个隐藏选项，用户可以单击隐藏图标，它将从主视图中隐藏相应的活动。计划是实现这一点，然后是另一个按钮，在单击后取消隐藏活动。我已经为表设置了名为hidden的布尔值，但是我很难让Javascript按照我的意愿工作以下是活动的home.html.erb视图的代码：  <!--<h1>Time Tracker</h1> <li><%= link_to 'Login',

因此，我想为我的应用程序实现一个隐藏选项，用户可以单击隐藏图标，它将从主视图中隐藏相应的活动。计划是实现这一点，然后是另一个按钮，在单击后取消隐藏活动。我已经为表设置了名为hidden的布尔值，但是我很难让Javascript按照我的意愿工作

以下是活动的home.html.erb视图的代码：

<!--home.html.erb-->

<!--<h1>Time Tracker</h1>
<li><%= link_to 'Login', login_new_path %></li> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>
  <link rel='stylesheet' type='text/css' href='../stylesheets/bootstrap.min.css'/>
  <script src='../javascripts/bootstrap.min.js'></script>
  <!-- Bootstrap -->
  <!--<link href="css/bootstrap.min.css" rel="stylesheet"> -->

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <![endif]-->
</head>
<body>
<!--
<style>
.navbar {
  background-color:#2F4F4F
}
</style>
-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">TimeTracker</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Activities<span class="sr-only">(current)</span></a></li>
      </ul>
      </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Signed in as Admin</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Profile</a></li>
            <!--
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            -->
            <li role="separator" class="divider"></li>
            <li><a href="#">Account Settings</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

<span>Change This</span>
<div id="activity_container">
  <input type="text" class="rename"/> <!--***NEW to edit -->
  <input type="button" value="rename"/> <!--***NEW to edit -->
  <ul class="list-group-sortable" id="Activities" >
    <h1 align = "center">Activities</h1>
    <% @activities.each do |activity| %>
        <li class="list-group-item" id="item" style="list-style: none;">
          <input type="text" class="edit" /> <!-- New 3/28 -->
          <input type="button" value="rename" class="showButton"/> <!--***NEW to edit -->
          <%= activity.a_name %>
          <%= link_to activity, method: :delete, data: { confirm: "Are you sure?" } do %>
              <i class="fa fa-trash-o" aria-hidden="true" title="Delete"></i>
          <% end %>
          <i onclick="editClick()" class="fa fa-pencil fa-fw" aria-hidden="true" title="Edit" id="editActivity"></i>
          <button id="hideActivity" style="border:none; padding:0">
            <i class="fa fa-eye" aria-hidden="true" title="Hide" id="item"></i>
          </button>
        </li>
    <% end %>
  </ul>
</div>

<ul class="pager">

  <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>Previous </a></li>
  <li class="next"><a href="#"> Next<span aria-hidden="true">&rarr;</span></a></li>
</ul>

<!-- *****************NEW*********************** -->
<%= form_for @activity do |a| %>
    <%= a.text_field :a_name, id: 'a_name_field', placeholder: 'Activity Name'%>
    <%= a.submit 'Create', id: 'submitButton', class: 'btn btn-primary'%>
<% end %>


<!-- ***************************************** -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    $(document).ready(function(){
        $("#unfilled").click(function(){
            if($("#unfilled").attr("src") == "<%=asset_path('unfilledbubble.png')%>"){
                $("#unfilled").attr("src", "<%=asset_path('filledbubble.png')%>");
            }else{
                $("#unfilled").attr("src", "<%=asset_path('unfilledbubble.png')%>");
            }
        });
    });
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- NEW 3/23 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

<script src="jquery.sortable.js"></script>
<script>
    function myFunction() {
        var x = document.getElementById("mySelect");
        x.remove(x.selectedIndex);
    }
    $( function() {
        $('#Activities').sortable({
            containment: '#activity_container',
            cursorAt: {left:event.offsetX, top:event.offsetY}, //to keep item near cursor NOT WORKING
            update: function (event, ui) { //to save order NOT WORKING
                var data = $(this).sortable('serialize');
                // POST to server using $.post or $.ajax
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'localhost:3000/activities'
                });
            }
        });
        $('#Activities').disableSelection();
    });

    var chosenValue;
    var chosenIndex;
    var newValue;

    //New 3/29 hide activity
    var index;
    //    $( 'li' ).click(function() {
    //
    //        index = $('li').index(this);
    //        $('li').eq(index).hide();
    //        $('span').text("That was li index #" + index);
    //    });
    $('#hideActivity').click(function() {
        index = $('li').index(this);
        $('li').eq(index).hide("slow"); //deletes everything //$(this).hide('li') deletes logo //$(this).closest('li').hide() only deletes first one
//
        $('span').text("That was div index #" + index);
    });
</script>

</body>
</html>

当上面的代码被取消注释并且hideActivity的Javascript代码被注释掉时，隐藏会起作用，但当用户只需单击带有活动名称的列表项而不是仅单击隐藏图标时，隐藏就会起作用。我想允许用户按照他们希望的顺序对他们的活动进行排序，这就是为什么这段代码不是我想要的

注释掉该代码后，我尝试使用hideActivity函数作为图标，但当我转到页面并单击隐藏图标时，span标记中的结果文本表示索引为-1，这意味着它找不到索引

我怀疑索引=$'li'。indexthis；，特别是关键字this，是主要问题，但我不知道为什么它适用于注释代码，而不是这个

任何帮助或建议都将不胜感激，谢谢。

有几个问题：

您不应该在一个页面上多次使用id值，以便进行更改

<button id="hideActivity"

这将处理页面上任何li元素内的任何位置的单击，而不一定在隐藏按钮内。有些li元素甚至不在列表中。你应该尽可能地缩小范围

    $('#Activities li .hideActivity').click( ....

因此，您的代码应该看起来像：

$( '#Activities li .hideActivity' ).click(function() {
    var index = $('#Activities li .hideActivity').index(this);
    $(this).closest('li').hide();
    $('span').text("That was .hideActivity index #" + index);
});

注意索引前的var关键字。您不想给变量全局范围

$( 'li' ).click(

    $('#Activities li .hideActivity').click( ....

$( '#Activities li .hideActivity' ).click(function() {
    var index = $('#Activities li .hideActivity').index(this);
    $(this).closest('li').hide();
    $('span').text("That was .hideActivity index #" + index);
});