我想通过单击列表项中的一列/字符串来过滤项目列表。当我点击销售时,只会显示销售类别列表中的项目。当我再次点击销售时,列表中的所有项目都会显示。
它在 jsfiddle 上按我想要的方式工作
但为什么它不能在 ASP .net 上的 Visual Studio 中工作?它在
中抛出异常...
var a = p.getElementsByTagName("a")[0];
...
这是我的 HTML 代码:
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="false" data-filter="true" id="testList">
<li data-icon="false">
<p class="ui-li-heading">
<strong> 1</strong>
</p>
<p class="ui-li-aside">
<span>
<a href="javascript:void(0)" class="areaItem" id="areaItem">Sales</a>
</span>
<span class="ui-icon ui-icon-gear" style="display: inline-block;"></span>
<span class="ui-icon ui-icon-check" style="display: inline-block;"></span>
</p>
</li>
</div>
</div>
这是我的 Javascript:
var filtered = 0;
$(".areaItem").click(function () {
var SearchTerm = $(this).text();
var ul = document.getElementById("testList");
var liArray = ul.getElementsByTagName("li");
for(var i=0; i<liArray.length; i++) {
var p = liArray[i].getElementsByTagName("p")[0];
var a = p.getElementsByTagName("a")[0];
if(filtered == 1) {
$(liArray[i]).show();
} else {
if(a.text.localeCompare(SearchTerm) != 0) {
$(liArray[i]).hide();
}
}
}
if (filtered == 0) {
filtered = 1;
} else {
filtered = 0;
}
});
最佳答案
我将从重构您的 javascript 开始:
$(document).ready(function () { //Make sure doc is loaded
var list = $("#testList");
var listItems = $(list).find("li"); //could also do $("#listtest li);
$(".areaItem").click(function () {
var parentLi = $(this).closest("li"); //Get li that encloses clicked item
$(listItems).not(parentLi).toggle(); //Toggle display of other li
});
});
它更简单,更符合 jQuery 的使用方式。
参见:http://jsfiddle.net/5pMsR/3/
这本身并不足以解决您的问题。仔细检查呈现给页面的内容。特别要检查 id
,因为 ASP.net 因破坏 ID 而臭名昭著。 Google ASP.net name mangling 和 asp.net ID mangling 以获取更多信息。如果您的 ID 被损坏,请在脚本中使用以下内容
var list = $('#<%= YourListElement.ClientID%>');
或使用类。
更新
在重新阅读您的问题后,我意识到我的解决方案可能无法满足您的需求。如果您希望两个“销售”项目在单击其中一个时都可见,您可以使用以下方法:
var list = $("#testList");
var listItems = $(list).find("li"); //could also do $("#listtest li);
$(".areaItem").click(function () {
var parentLi = $(this).closest("li"); //Get Parent li of clicked element
var filter = $(parentLi).find(".areaItem").text(); //Set Filter based on text of clicked item
$(listItems).filter(function(){ //Use jQuery filter to find based on text
//in the filter context 'this' is a li being filtered not the item clicked
//$(this).find(".areaItem").text() is used to compare against all list items text
return $(this).find(".areaItem").text() != filter;
}).toggle();
});
参见:http://jsfiddle.net/5pMsR/8/
更新 2
我已经更新了上面的代码和 fiddle 以使解决方案基于评论更加健壮。 a
标签似乎没有出现在最终渲染中。代码更改现在将基于 CSS 类而不是标签进行搜索。
关于Javascript 在 jsfiddle 中有效,但在 ASP .net 中无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16043035/