如何在兩個選項卡中使用相同的腳本Jquery或javaScript

我有一個兩個選項卡在我的jQuery應用程序...此外我有一個搜索過濾器複選框列表（使用Jquery）....我想這個搜索過濾器兩個標籤.....我在第一個標籤中添加了..它工作正常...但是，如果我加入第二個標籤...列表顯示，但搜索篩選器不顯示....如何在兩個選項卡中使用相同的腳本Jquery或javaScript

我的編碼如下。 ....

搜索列表過濾器編碼：

<script> 

(function ($) { 
    // custom css expression for a case-insensitive contains() 
    jQuery.expr[':'].Contains = function(a,i,m){ 
     return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; 
    }; 

    function filterList(header, list) { 
    // header is any element, list is an unordered list 
    // create and add the filter form to the header 
    var form = $("<form>").attr({"class":"filterform","action":"#"}), 
     input = $("<input>").attr({"class":"filterinput","type":"text"}); 
    $(form).append(input).appendTo(header); 

    $(input) 
     .change(function() { 
     var filter = $(this).val(); 
     if(filter) { 

      $matches = $(list).find('b:Contains(' + filter + ')').parent(); 
      $('li', list).not($matches).slideUp(); 
      $matches.slideDown(); 

     } else { 
      $(list).find("li").slideDown(); 
     } 
     return false; 
     }) 
    .keyup(function() { 
     // fire the above change event after every letter 
     $(this).change(); 
    }); 
    } 


    //ondomready 
    $(function() { 
    filterList($("#form"), $("#list")); 
    }); 
}(jQuery)); 

    </script>

在第一個選項卡Div標籤：

<div id="form"></div> 
<ul id="list"> 
     <li><input type ="checkbox" name="v1" ><img src="images/apple.png" width="30" align="absmiddle" height="30"> <b>Bala</b></li> 
     <li><input type ="checkbox" name="v1" ><img src="images/acorn_squash.png" width="30" align="absmiddle" height="30"> <b>Babu</b></li> 
     <li><input type ="checkbox" name="v1"><img src="images/broccoli.png" width="30" align="absmiddle" height="30"> <b>David</b></li> 
     <li><input type ="checkbox" name="v1"><img src="images/carrot.png" width="30" align="absmiddle" height="30"> <b>Dinesh</b></li> 
     <li><input type ="checkbox" name="v1"><img src="images/celery.png" width="30" align="absmiddle" height="30"> <b>Eswaran</b></li> 
    </ul>

在第二個選項卡Div標籤：

<div id="form"></div> 
<ul id="list"> 
     <li><input type ="checkbox" name="v1" ><img src="images/apple.png" width="30" align="absmiddle" height="30"> <b>Bala</b></li> 
     <li><input type ="checkbox" name="v1" ><img src="images/acorn_squash.png" width="30" align="absmiddle" height="30"> <b>Babu</b></li> 
     <li><input type ="checkbox" name="v1"><img src="images/broccoli.png" width="30" align="absmiddle" height="30"> <b>David</b></li> 
     <li><input type ="checkbox" name="v1"><img src="images/carrot.png" width="30" align="absmiddle" height="30"> <b>Dinesh</b></li> 
     <li><input type ="checkbox" name="v1"><img src="images/celery.png" width="30" align="absmiddle" height="30"> <b>Eswaran</b></li> 
    </ul>

在這些編碼，第一個選項卡，搜索過濾器工作正常....但是第二個選項卡，只列出顯示，不顯示搜索框.... .......

我試過了，而不是「div」中的「id」，我試過「class」..但那也不起作用....我在這裏做了什麼錯誤....如何使用same兩個製表符的腳本...

來源

2011-06-13 Ram

首先，IDS應該是在頁面上獨一無二的，所以我不能告訴我們，如果這是真的通過您的HTML代碼片段。其次，我沒有看到任何具有「filterform」或「filterinput」的HTML。 – Jeremy 2011-06-13 12:49:29

javascript的基本規則之一就是你不應該爲多個元素使用相同的id。 – Shrinath 2011-06-13 12:51:13

發生這種情況是因爲$("#form")只返回一個對象，因爲您正在使用' ID'。如果您想要選擇多個分區，請使用類來代替您的分區。

你sholud做這樣的事情：

$(function() { 
    $('.form').each(function(){ 
     you pass to filterList your div and the next element in the dom (the ul) 
     filterList($(this), $(this).next()); 
    } 
    }); 
}(jQuery));

要帶班迭代的所有div =形式

來源

2011-06-13 12:50:26

如何在兩個選項卡中使用相同的腳本Jquery或javaScript

回答

相關問題