我写了小函数(实际上是2)。 首先,ul> li列出了同时自定义下拉列表+过滤器。
它的作用:
- when selected an 'li'
- copy span from inside of it to - > 'a href' (top of the dropdown)
- get class of the span inside 'a href' - which we just copied
- hide all div's which does not have selected class (div's and span's have same classes)
一切正常,直到我在if else条件下添加'all'选项。
Chrome js控制台在最后一步说明未选择的所选类
$('.content div').not('.' + CheckWhichClassSelected).hide();
我做错了什么?
jsfiddle:http://jsfiddle.net/MrTest/hLcML/
HTML
<div class="filter">
<a class="dropDownSelect" href="#"> -- select -- </a>
<ul class="dropDownList">
<li><span class="filter0">All</span></li>
<li><span class="filter1">Filter 1</span></li>
<li><span class="filter2">Filter 2</span></li>
<li><span class="filter3">Filter 3</span></li>
<li><span class="filter4">Filter 4</span></li>
</ul>
</div>
<div class="tab-menu">
</div>
<div class="content">
<div class="filter1">1</div>
<div class="filter2">2</div>
<div class="filter3">3</div>
<div class="filter4">4</div>
<div class="filter1">1</div>
<div class="filter2">2</div>
<div class="filter3">3</div>
<div class="filter4">4</div>
</div>
JS:
/*! OnLoad
---------------------------------------------*/
$(document).ready(function() {
$('.dropDownSelect').click(function(event) {
$(this).next().slideToggle(100);
});
$('.dropDownList li').click(function(event) {
$(this).parent().slideUp(100);
$('.dropDownSelect').empty();
$(this).children().clone().appendTo('.dropDownSelect');
// ShowSelectedClass
var CheckWhichClassSelected = $('.dropDownSelect').children().attr('class');
alert(CheckWhichClassSelected);
$('.content div').show();
if (CheckWhichClassSelected === filter0) {
return false;
}
else {
$('.content div').not('.' + CheckWhichClassSelected).hide();
}
});
});
非常感谢任何帮助。
皮特
答案 0 :(得分:2)
我想你错过了两个顶点:
if (CheckWhichClassSelected === filter0) {
它应该是:
if (CheckWhichClassSelected === 'filter0') {
现在似乎工作正常:
答案 1 :(得分:2)
您需要在filter0
中将if (CheckWhichClassSelected === filter0) {
包裹在引号内:
if (CheckWhichClassSelected === "filter0") {