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は、私の要素が(LI)の兄弟がNOクラスfilter-selected
を持っていない場合、私はチェックしています。この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>
のようですが、私はいつもtrue
を取得クラスがあっても。ここに私のjqueryのthis
は何filter-selected
を持っていないリチウムのいずれかである
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"});
}
です。
すべてのヘルプは、感謝を:)感謝
フィルタ選択は、クラスであり、それはドット '.'' $(この).siblings( "フィルタ選択")とともに使用することがshoud。長 ' –
@AmanRawat .......私はとてもばかげている: ')ありがとう、あなた! :) – Rosiana