2017-01-08 3 views
1
$(".next-list li").click(function() { 
    if ($(this).hasClass("all-selected")) { 
    if (!$(this).hasClass("filter-selected")) { 
     $(this).siblings().removeClass("filter-selected"); 
     $(this).siblings().children(":last-child").css({ 
     "display": "none" 
     }); 
     $(this).addClass("filter-selected"); 
     $(this).children().last().css({ 
     "display": "inline-block" 
     }); 
    } else { 
     $(this).siblings().addClass("filter-selected"); 
     $(this).siblings().children(":last-child").css({ 
     "display": "inline-block" 
     }); 
     $(this).removeClass("filter-selected"); 
     $(this).children().last().css({ 
     "display": "none" 
     }); 
    } 
    } else { 
    if (!$(this).hasClass("filter-selected")) { 
     $(this).addClass("filter-selected"); 
     $(this).children().last().css({ 
     "display": "inline-block" 
     }); 
     $(".all-selected").removeClass("filter-selected"); 
     $(".all-selected > span:last-child").css({ 
     "display": "none" 
     }); 
    } else { 
     $(this).removeClass("filter-selected"); 
     $(this).children().last().css({ 
     "display": "none" 
     }); 
     console.log($(this).siblings("filter-selected").length); 
     if ($(this).siblings("filter-selected").length == 0) { 
     $(this).parent().children("li:first-child").addClass("filter-selected"); 
     $(this).parent().children("li:first-child").children().last().css({ 
      "display": "inline-block" 
     }); 
     } 
    } 
    } 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="dropdown-filter"> 
    <div class="dropdown-filter-selected"><a href="#"><span class="changeable"><span class="category-text">Provider Kartu</span></span><span class="dropdown-filter-icon flaticon-arrow-down-sign-to-navigate"></span></a> 
    </div> 
    <div class="dropdown-filter-selection"> 
    <ul class="dropdown-filter-selection-list next-list"> 
     <li class="filter-selected all-selected"><span class="changeable"><span class="menu-standard category-text">Semua Provider</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check first-list-icon"></span> 
     </a> 
     </li> 
     <li><span class="changeable"><span class="menu-standard category-text">Mastercard</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span> 
     </a> 
     </li> 
     <li><span class="changeable"><span class="menu-standard category-text">VISA</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span> 
     </li> 
     <li><span class="changeable"><span class="menu-standard category-text">JCB</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span> 
     </li> 
     <li><span class="changeable"><span class="menu-standard category-text">Union Pay</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span> 
     </li> 
     <li><span class="changeable"><span class="menu-standard category-text">Lainnya</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span> 
     </li> 
    </ul> 
    </div> 
</div> 

мой HTML, как этопроверка JQuery, если не родной брат не имеет класс

<ul class="dropdown-filter-selection-list next-list"> 
    <li class="all-selected"><span class="changeable"><span class="menu-standard category-text">Semua Provider</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check first-list-icon" style="display: none;"></span></li> 
    <li><span class="changeable"><span class="menu-standard category-text">Mastercard</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span></li> 
    <li><span class="changeable"><span class="menu-standard category-text">VISA</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span></li> 
    <li><span class="changeable"><span class="menu-standard category-text">JCB</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span></li> 
    <li class="filter-selected"><span class="changeable"><span class="menu-standard category-text">Union Pay</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check" style="display: inline-block;"></span></li> 
    <li class="filter-selected"><span class="changeable"><span class="menu-standard category-text">Lainnya</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check" style="display: inline-block;"></span></li> 
</ul> 

Я проверяю, если мой элемент (л) братья и сестры не имеет класса filter-selected, но я всегда получаю true даже если есть классы. Вот мой JQuery

if($(this).siblings("filter-selected").length == 0) { 
    $(this).parent().children("li:first-child").addClass("filter-selected"); 
    $(this).parent().children("li:first-child").children().last().css({"display": "inline-block"}); 
} 

this является любой из литий, который не имеет filter-selected.

Любая идея? Любая помощь приветствуется, спасибо :)

+1

фильтра выбран класс и Шоуда быть использованы с точки '' .' $ (это) .siblings ("фильтровать выбранные"). Длина ' –

+0

@AmanRawat ....... . Я чувствую себя настолько глупо: ') Спасибо, хороший сэр! :) – Rosiana

ответ

2

Поскольку filter-selected является класс, вы должны добавить точку перед.

if($(this).siblings(".filter-selected").length == 0) { 
Смежные вопросы