Javascript在jsfiddle中工作，但不在ASP中.net

Question

我想通過單擊列表項中的一列/字符串來過濾項目列表。當我點擊銷售時，只會顯示銷售類別列表中的項目。當我再次點擊銷售時，將顯示列表中的所有項目。

它就像我要上jsfiddle

但爲什麼它沒有在Visual Studio中工作的ASP .NET？它拋出

... 
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; 
    } 
}); 

Answer 1

我要開始通過重構你的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是臭名昭着的mangling ID。谷歌ASP.net名稱mangling和asp.net ID搗毀的更多信息。如果您的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類而不是標籤進行搜索。

Answer 2

我已經在過去也有類似的問題，這樣的：問題與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> 

Answer 3

我帶來了一點點奇蹟給我的解決方案，因爲我是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; 
      } 
     });