2017-01-08 14 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は、私の要素が(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"}); 
} 

です。

すべてのヘルプは、感謝を:)感謝

+1

フィルタ選択は、クラスであり、それはドット '.'' $(この).siblings( "フィルタ選択")とともに使用することがshoud。長 ' –

+0

@AmanRawat .......私はとてもばかげている: ')ありがとう、あなた! :) – Rosiana

答えて

2

filter-selectedはクラスがあるので、あなたがドットを前に追加する必要があります。

if($(this).siblings(".filter-selected").length == 0) { 
関連する問題