[英]How to click a button and open all links in an unordered list in jQuery
[英]Return all links on button click
我的頁面包含大量鏈接。
我已經集成了一個搜索框供用戶鍵入鏈接名稱,當他們點擊“搜索”按鈕時,它將返回包含用戶鍵入內容的所有鏈接:
這是此頁面的HTML部分:
<h4><a href="#" id="Trig16">First Header</a></h4>
<div class="slider" id="Slide16">
<ul>
<li><a href="/TestDocument.doc" target="_blank">Document 1</a></li>
<li><a href="/TestDocument2.doc" target="_blank">Document 2</a></li>
<li><a href="/TestDocument3.doc" target="_blank">Document 3</a></li>
</ul>
</div>
<h4><a href="#" id="Trig19">Second Header</a></h4>
<div class="slider" id="Slide19">
<ul>
<li><a href="~/Docs/Document4.pdf" target="_blank">Document 4</a></li>
<li><a href="~/Docs/Document5.pdf" target="_blank">Document 5</a></li>
</ul>
</div>
這是該按鈕的JavaScript :
$("#ButtonSearch").click(function () {
var textboxValue = $("#SearchLink").val().toLowerCase();
$('.slider').each(function () {
var exist = false;
$(this).find('ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
$(this).show();
exist = true;
}
else
$(this).hide();
});
if (exist === false) {
$(this).prev('h4').hide();
$(this).hide();
}
else {
$(this).prev('h4').show();
}
});
});
現在,我還有一個清除按鈕。當用戶單擊該按鈕時,我希望所有滑塊,標題,ul,li和鏈接返回時都不會刷新頁面。
到目前為止,這是該按鈕的功能:
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.slider').each(function() {
$(this).prev('h4').show();
});
});
因此,僅作為示例..如果我是用戶,並在搜索框中輸入Document 1
然后點擊搜索,它將返回標頭First Header
而其下方將是Document 1
。
現在,如果我單擊“清除搜索”,它將返回我所有的h4
元素,但它們下面沒有任何東西,除了帶有“ Document 1
的“ First Header
元素。.因此,它將保留原始搜索並僅返回其余的h4
元素..
所以我的問題是,單擊清除搜索按鈕后如何返回所有內容?
這將在按鍵或粘貼時實時過濾。 當您的用戶在搜索中鍵入內容時,如果鏈接包含文本,它將隱藏不包含文本的鏈接,並顯示包含文本的鏈接。 值更改時,它將根據搜索的值顯示或隱藏。
編輯:搜索現在綁定到對接
let filter = function(){ $filter = $('#search-filter').val(); $.each($('a'),function(k,v){ let heading = '#'+$(v).closest('div').attr('data-bind'); let sibs = $(v).parent().siblings(); if(v.innerText.toLowerCase().indexOf( $filter ) > -1){ //Show $(v).closest('li').show(); } else { //Hide $(v).closest('li').hide(); } }); } $('#searchBtn').on('click',filter); $('#clrBtn').on('click',function(){ $("#search-filter").val(""); filter(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="search-filter"> <input id="searchBtn" type="button" value="Search"> <input id="clrBtn" type="button" value="clear"> <h4 id="Trig16">First Header</h4> <div class="slider" id="Slide16" data-bind="Trig16"> <ul> <li><a href="/TestDocument.doc" target="_blank">Document 1</a></li> <li><a href="/TestDocument2.doc" target="_blank">Document 2</a></li> <li><a href="/TestDocument3.doc" target="_blank">Document 3</a></li> </ul> </div> <h4 id="Trig19">Second Header</h4> <div class="slider" id="Slide19" data-bind="Trig19"> <ul> <li><a href="~/Docs/Document4.pdf" target="_blank">Document 4</a></li> <li><a href="~/Docs/Document5.pdf" target="_blank">Document 5</a></li> </ul> </div>
我已經使用現有的方法解決了這個問題:
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.slider').each(function() {
$(this).prev('h4').show();
$(this).children().each(function () {
$('ul li').show();
$('a').show();
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.