javascript实现搜索筛选功能
程序员文章站
2022-06-25 21:43:14
案例样式即功能HTML代码： ...</div>
<div class="content">
<p><strong>案例样式即功能</strong><br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDExMTMvYl8wXzIwMjAxMTEzMTAyODE3NzczNy5naWY=" alt="javascript实现搜索筛选功能" title="javascript实现搜索筛选功能"></p>
<p><mark>HTML代码：</mark></p>
<pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>请输入用户名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>//搜索框
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>//性别筛选按钮
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">sex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>m<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>male<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">sex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>f<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>female<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">sex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>a<span class="token punctuation">'</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>all<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>//搜索列表，有js渲染添加
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p><mark>CSS代码：</mark></p>
<pre><code class="prism language-css"><span class="token selector">*</span><span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid #ccc<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span>4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .search</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .search input</span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span>10px 15px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span>4px<span class="token punctuation">;</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span>30px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span>1px solid #ccc<span class="token punctuation">;</span>
<span class="token property">outline</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .search p</span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .search p span</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>#38f<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>3px 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .search p span.active</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span>#38f<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .user-list</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .user-list ul</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .user-list ul li</span><span class="token punctuation">{</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span>1px solid #ccc<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>10px 0<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .user-list ul li img</span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper .user-list ul li p</span><span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgb</span><span class="token punctuation">(</span>117, 114, 114<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><mark>Javascript代码：</mark></p>
<pre><code class="prism language-javascript"><span class="token keyword">var</span> oul<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> oinput<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> text<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">,</span>sex<span class="token operator">=</span><span class="token string">'a'</span><span class="token punctuation">;</span><span class="token comment">//要将text和sex写在全局变量里面，这样可以记录上次操作的值为后续的页面渲染作准备；</span>
<span class="token keyword">var</span> personArr<span class="token operator">=</span><span class="token punctuation">[</span>
<span class="token punctuation">{</span>name<span class="token punctuation">:</span><span class="token string">'王刚'</span><span class="token punctuation">,</span>src<span class="token punctuation">:</span><span class="token string">'images/1.png'</span><span class="token punctuation">,</span>des<span class="token punctuation">:</span><span class="token string">'颈椎不好'</span><span class="token punctuation">,</span>sex<span class="token punctuation">:</span><span class="token string">'m'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>name<span class="token punctuation">:</span><span class="token string">'刘颖'</span><span class="token punctuation">,</span>src<span class="token punctuation">:</span><span class="token string">'images/2.png'</span><span class="token punctuation">,</span>des<span class="token punctuation">:</span><span class="token string">'我是谁'</span><span class="token punctuation">,</span>sex<span class="token punctuation">:</span><span class="token string">'f'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>name<span class="token punctuation">:</span><span class="token string">'王秀英'</span><span class="token punctuation">,</span>src<span class="token punctuation">:</span><span class="token string">'images/3.jpg'</span><span class="token punctuation">,</span>des<span class="token punctuation">:</span><span class="token string">'我很好看'</span><span class="token punctuation">,</span>sex<span class="token punctuation">:</span><span class="token string">'f'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>name<span class="token punctuation">:</span><span class="token string">'刘金磊'</span><span class="token punctuation">,</span>src<span class="token punctuation">:</span><span class="token string">'images/4.png'</span><span class="token punctuation">,</span>des<span class="token punctuation">:</span><span class="token string">'你没有见过陌生人的脸'</span><span class="token punctuation">,</span>sex<span class="token punctuation">:</span><span class="token string">'m'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>name<span class="token punctuation">:</span><span class="token string">'刘飞仙'</span><span class="token punctuation">,</span>src<span class="token punctuation">:</span><span class="token string">'images/5.jpg'</span><span class="token punctuation">,</span>des<span class="token punctuation">:</span><span class="token string">'瓜皮刘'</span><span class="token punctuation">,</span>sex<span class="token punctuation">:</span><span class="token string">'m'</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">//页面渲染</span>
<span class="token keyword">function</span> <span class="token function">randerlist</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> str<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>elem<span class="token punctuation">,</span>index<span class="token punctuation">)</span><span class="token punctuation">{</span>
str<span class="token operator">+=</span><span class="token string">'<li>\
<img src="'</span><span class="token operator">+</span>elem<span class="token punctuation">.</span>src<span class="token operator">+</span><span class="token string">'">\
<p class="username">'</span><span class="token operator">+</span>elem<span class="token punctuation">.</span>name<span class="token operator">+</span><span class="token string">'</p>\
<p class="des">'</span><span class="token operator">+</span>elem<span class="token punctuation">.</span>des<span class="token operator">+</span><span class="token string">'</p>\
</li>'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
oul<span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>str<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">randerlist</span><span class="token punctuation">(</span>personArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//为性别筛选按钮设置点击事件，并获取每一次点击后的结果进行页面渲染。</span>
<span class="token keyword">var</span> spans<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator"><</span>spans<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>j<span class="token punctuation">)</span><span class="token punctuation">{</span>
spans<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">//每点击一个按钮就要重新设置css属性</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> k<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>k<span class="token operator"><</span>spans<span class="token punctuation">.</span>length<span class="token punctuation">;</span>k<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
spans<span class="token punctuation">[</span>k<span class="token punctuation">]</span><span class="token punctuation">.</span>className<span class="token operator">=</span><span class="token string">""</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>className<span class="token operator">=</span><span class="token string">'active'</span><span class="token punctuation">;</span>
<span class="token comment">/*不要直接var lastArr=filterSex(this.innerHTML[0],personArr);，一定要写sex=this.innerHTML[0];
因为当点击了性别筛选按钮并输入姓名之后进行了一次渲染，再次删除姓名此时text=‘’，需要重新渲染，但并没有记
录上次点击性别筛选按钮后的sex值，此时他会默认为'a';*/</span>
sex<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> lastArr<span class="token operator">=</span><span class="token function">filterSex</span><span class="token punctuation">(</span>sex<span class="token punctuation">,</span>personArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
lastArr<span class="token operator">=</span><span class="token function">filterText</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span>lastArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">randerlist</span><span class="token punctuation">(</span>lastArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//获取搜索框内容，并重新渲染</span>
oinput<span class="token punctuation">.</span><span class="token function-variable function">oninput</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
text<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token keyword">var</span> newArr<span class="token operator">=</span><span class="token function">filterText</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span>personArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
newArr<span class="token operator">=</span><span class="token function">filterSex</span><span class="token punctuation">(</span>sex<span class="token punctuation">,</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">randerlist</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//根据文本框的内容进行筛选，并返回筛选后的数组</span>
<span class="token keyword">function</span> <span class="token function">filterText</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span>arr<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">//filter函数，筛选作用，将return true的elem拼成一个数组并返回</span>
<span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>elem<span class="token punctuation">,</span>index<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>elem<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token operator">!=</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//根据性别进行筛选，并返回筛选后的数组</span>
<span class="token keyword">function</span> <span class="token function">filterSex</span><span class="token punctuation">(</span>sex<span class="token punctuation">,</span>arr<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>sex<span class="token operator">==</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> arr<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>elem<span class="token punctuation">,</span>index<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>elem<span class="token punctuation">.</span>sex<span class="token operator">==</span>sex<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>本文地址：https://blog.csdn.net/qq_45689637/article/details/109625948</p> </div>
<div class="tags">
相关标签： <a href="/t/%E5%89%8D%E7%AB%AF/" target="_blank">
前端 </a>
<a href="/t/javascript/" target="_blank">
javascript </a>
</div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1534899.html">
微商怎样成交 微商成交的终极密码揭晓 </a>
</p>
<p>
下一篇： <a href="/article/1534901.html">
万历年间的南京教案究竟是怎么回事？为何会发生南京教案？ </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2138449.html" target="_blank" title="如何用JavaScript实现功能齐全的单链表详解">
<h2>
如何用JavaScript实现功能齐全的单链表详解 </h2>
</a>
</li>
<li>
<a href="/article/2138375.html" target="_blank" title="Android流式布局实现历史搜索记录功能">
<h2>
Android流式布局实现历史搜索记录功能 </h2>
</a>
</li>
<li>
<a href="/article/2135803.html" target="_blank" title="jquery实现静态搜索功能(可输入搜索文字)">
<h2>
jquery实现静态搜索功能(可输入搜索文字) </h2>
</a>
</li>
<li>
<a href="/article/2135807.html" target="_blank" title="JavaScript实现经纬度转换成地址功能">
<h2>
JavaScript实现经纬度转换成地址功能 </h2>
</a>
</li>
<li>
<a href="/article/2128933.html" target="_blank" title="Vue.js实现多条件筛选、搜索、排序及分页的表格功能">
<h2>
Vue.js实现多条件筛选、搜索、排序及分页的表格功能 </h2>
</a>
</li>
<li>
<a href="/article/2123343.html" target="_blank" title="javascript实现对话框功能警告（alert 消息对话框）确认（confirm 消息对话框）">
<h2>
javascript实现对话框功能警告（alert 消息对话框）确认（confirm 消息对话框） </h2>
</a>
</li>
<li>
<a href="/article/2120016.html" target="_blank" title="Android开发实现仿京东商品搜索选项卡弹窗功能">
<h2>
Android开发实现仿京东商品搜索选项卡弹窗功能 </h2>
</a>
</li>
<li>
<a href="/article/2117078.html" target="_blank" title="javascript使用substring实现的展开与收缩文字功能示例">
<h2>
javascript使用substring实现的展开与收缩文字功能示例 </h2>
</a>
</li>
<li>
<a href="/article/2103143.html" target="_blank" title="android实现搜索功能并将搜索结果保存到SQLite中(实例代码)">
<h2>
android实现搜索功能并将搜索结果保存到SQLite中(实例代码) </h2>
</a>
</li>
<li>
<a href="/article/2101282.html" target="_blank" title="javascript实现的图片预览和上传功能示例【兼容IE 9】">
<h2>
javascript实现的图片预览和上传功能示例【兼容IE 9】 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>