1

我想通过单击列表项中的一列/字符串来过滤项目列表。当我点击销售时，只会显示销售类别列表中的项目。当我再次单击销售时，将显示列表中的所有项目。

它就像我在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>
                        &nbsp;
                        &nbsp;
                    </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;
    }
});
4

3 回答 3

2

我将从重构您的 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/

这本身不足以解决您的问题。仔细检查呈现给页面的内容。特别是 check id，因为 ASP.net 因破坏 ID 而臭名昭著。谷歌 ASP.net 名称修改和 asp.net ID 修改以获取更多信息。如果您的 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

我已经更新了上面的代码和小提琴，以根据评论使解决方案更加健壮。最终渲染中似乎a不存在该标签。代码更改现在将基于 CSS 类而不是标签进行搜索。

于 2013-04-17T01:06:56.617 回答
1

过去我遇到过类似的问题：问题在于 ASP.NET 页面生命周期和在 DOM 中创建元素之前解析的 javascript。由于您试图将单击处理程序绑定到.areaItem该类，因此在解析该函数​​时，该类的成员元素必须全部在 DOM 中可用。

从记忆中我想我最终将点击委托给了文档：

$(document).on(click, ".areaItem", function() { <function content> });

我相信这会使解析发生在load事件之后，此时所有元素都已创建。

我不确定的原因是因为我删除了所有这些代码并以不同的方式进行了操作：将脚本块直接放在我的内容页面中，位于 ASP 控件和 HTML 之后。如果您希望将 JS 放在标头或单独的文件中，但在内容确实有效后将其嵌入，则不理想：

<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>
                    &nbsp;
                    &nbsp;
                </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>

<script>
  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;
    }
});
</script>
于 2013-04-16T23:35:59.620 回答
0

我带来了对我来说有点奇迹的解决方案，因为我是 javascript 新手。在 IE 中一切正常，但在 Chrome 中，点击后所有 li 都消失了。

var filtered = 0;

        $(".areaItem").click(function () {
            var SearchTerm = $(this).text();

            $('#testList > li').each(function () {
                var a = $(this).find("a").attr("id","areaItem");

                //alert(a[0].innerHTML);

                if (filtered == 1) {
                    $(this).show();
                } else {
                    //alert(a.text());
                    if (a[0].innerHTML.localeCompare(SearchTerm) != 0) {
                        $(this).hide();
                    }
                }

            });


            if (filtered == 0) {
                filtered = 1;
            } else {
                filtered = 0;
            }
        });
于 2013-04-17T06:54:24.360 回答