所以我想为我的应用程序实现一个隐藏选项，用户可以单击隐藏图标，它会隐藏主视图中的相应活动。计划是实现它，然后是另一个按钮，一旦点击就“取消隐藏”活动。我已经为表设置了布尔值，名为“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">←</span>Previous </a></li>
<li class="next"><a href="#"> Next<span aria-hidden="true">→</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>
靠近底部，注释掉了Javascript代码：
// $( 'li' ).click(function() {
//
// index = $('li').index(this);
// $('li').eq(index).hide();
// $('span').text("That was li index #" + index);
// });
当上面的代码被取消注释并且“hideActivity”的正在进行的Javascript代码被注释掉时，隐藏起作用，但是当用户只是点击带有活动名称的列表项而不是隐藏图标时，它就会这样做。我希望允许用户按照他们希望的顺序对活动进行排序，这就是为什么这段代码不是我想要的。
随着代码被注释掉，“hideActivity”功能就是我尝试用于图标的功能，但是当我转到页面并单击隐藏图标时，span标记中的结果文本指出索引是 - 1，这意味着它无法找到索引。
我怀疑“index = $（'li'）。index（this）;”，特别是关键字“this”，是主要问题，但我不知道为什么它适用于注释代码但不是这个之一。
任何帮助或建议都将不胜感激，谢谢。
答案 0 :(得分：1)
有几个问题：
您不应在页面上多次使用id值，因此您想要更改
<button id="hideActivity"
到
<button class="hideActivity"
您将处理程序设置为：
$( 'li' ).click(
这将处理页面上任何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关键字。您不希望赋予变量全局范围。