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

它就像我想要的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;
    }
});

===============>>#1 票数: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/

这本身就不足以解决你的问题。 仔细检查呈现给页面的内容。 特别是检查id ,因为ASP.net因修改ID而臭名昭着。 谷歌ASP.net名称mangling和asp.net ID mangling获取更多信息。 如果您的ID被破坏,请在脚本中使用以下内容

var list = $('#<%= YourListElement.ClientID%>');

或者使用课程。

UPDATE

在重新阅读您的问题后,我意识到我的解决方案可能无法满足您的需求。 如果您希望两个“销售”项目都可见,如果单击其中任何一个,您可以使用以下内容:

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类而不是标记进行搜索。

===============>>#2 票数: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>

===============>>#3 票数: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;
            }
        });

  ask by ThePavolC translate from so

未解决问题?本站智能推荐:

2回复

JavaScript的“更改”功能在ASP.NET MVC中不起作用

我尝试使用js ASP.NET MVC 5查看基于类别的产品列表。对此我是陌生的,它根本不会作用于选择框。 这是我的代码: 我的选择块: Js:
2回复

javascript在mozilla中不起作用,但在其他浏览器中起作用

使用的技术:-Asp.Net 2.0 代码:-见下文 描述:-下面给出的hello代码在ie和其他版本中都可以正常工作,但在所有mozila版本中均不能正常工作。javascript很容易确定两个文本框的值。 您可以轻松理解。
2回复

使用Javascript的电子邮件地址验证在ASP.net中不起作用

我正在使用以下代码来验证电子邮件地址,并将电子邮件地址与重新输入电子邮件地址进行比较。 但是,当我输入错误的电子邮件地址格式并单击“注册”时,不知何故我没有弹出窗口。
2回复

Javascript在母版页中不起作用

我有一个使用母版页的登录页,我通过javascript应用了验证,但无法正常工作。 如果我在用户名中提供了一些值,它将在警报中显示我,但是如果我不提供任何值,则if条件应该可以工作,但它不起作用,警报仅显示“正在测试”。 这是我的html代码。
2回复

ASP.NET中JavaScript的转义变量

我在asp.net中有以下代码: 当然,当“ lastName”变量包含[']符号(O'Connell)时,它将停止工作。 如何正确转义asp.net中的字符串以使它们正确显示在JavaScript代码中?
3回复

在Firefox中而不是IE中工作的ASP.NET页

今天,我们正在将ASP.NET Web应用程序部署到新的生产服务器上。 在我们的测试服务器中,这些页面在IE和Firefox上均正常运行。 但是现在在生产服务器中,加载了主要的欢迎页面,并进入其中具有“提交/输入”按钮的应用程序在IE中不起作用,并显示未找到页面的异常。 相同的链接
3回复

asp.net中的动态Javascript

好。 我面临的问题是我有自己的自定义控件,我做一个查询,获取记录,并根据数据动态添加HTML控件到页面。 现在有添加一些动态JavaScript的问题 我是在文字控件的帮助下完成的。 这就像一个魅力 我从代码后面动态添加文字文本。 但是,将控件放在update
5回复

在JavaScript中引用ASP.NET Web控件

我已经在用户控件中创建了一个下拉列表,请参见下面的源代码, 在Page_load中,我这样做: 所以,如果我想在外部javascript文件myJS.js中引用此控件,应该使用什么代码? 我尝试使用document.getElementById("<%=ddlInd.
5回复

如何在Javascript中设置ASP.NET服务器时间

如何在Javascript中将文本框值设置为等效于DateTime.Now? 我尝试了这些 两者都将值设置为文字字符串<%= System.DateTime ...而不是时间。
1回复

使用javascript删除lisbox asp.net中的选定项目

我有这个javascript函数,当在asp.net中单击按钮时会触发 来源: http : //www.vijaykodali.com/Blog/post/2007/12/14/Add-Delete-Items-in-DropDownList2c-ListBox-using-Jav