как скрыть/показать DIV с фильтрацией данных

<script> 
function changeContent(str) 
{ 
    if(str == 'recent' || str == 'old' && !($(".main_content").is(':visible'))) 
    { 
     $(".main_content").show(); 
    } 
    else if(str == 'newComment') { 
     $(".main_content").hide(); 
    } 
} 
</script>

параметры списка с OnClick функции «changeContent()» с идентификатором в качестве параметра ..как скрыть/показать DIV с фильтрацией данных

<main class="cd-main-content"> 
     <div class="cd-tab-filter-wrapper"> 
      <div class="cd-tab-filter"> 
       <ul class="cd-filters"> 
        <li class="placeholder"> 
         <a data-type="all" href="#0">All</a> <!-- selected option on mobile --> 
        </li> 
        <!-- <li class="filter"><a class="selected" href="#0" data-type="all">All</a></li> --> 
        <li class="filter" data-filter=".color-1"><a href="#0" id="recent" data-type="color-1" onclick="changeContent(this.id)">Recent to Old</a></li> 
        <li class="filter" data-filter=".color-2"><a href="#0" id="old" data-type="color-2" onclick="changeContent(this.id)">Old to Recent</a></li> 
        <li class="filter" ><a href="#0" id="newComment" data-type="color-3" onclick="changeContent(this.id)">New Comment</a></li> 
       </ul> <!-- cd-filters --> 
      </div> <!-- cd-tab-filter --> 
     </div> <!-- cd-tab-filter-wrapper -->

основной DIV, который должен быть скрыты и транслируемый (наряду с фильтром данных), ДИВ становится скрыт/показан, но фильтр данных не работает, как только его получить скрытый ..

<div class="main_content"> 
     <section class="cd-gallery"> 
      <ul> 
       <li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li> 
       <li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li> 
       <li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li> 
       <li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li> 
       <li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li> 
       <li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li> 
       <li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li> 
       <li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li> 
       <li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li> 
       <li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li> 
       <li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li> 
       <li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li> 
       <li class="gap"></li> 
       <li class="gap"></li> 
       <li class="gap"></li> 
      </ul> 
      <div class="cd-fail-message">No results found</div> 
     </section> <!-- cd-gallery --> 
     </div> 
     <!-- <div class="new_content" style="display:none"> 
     </div> -->

источник

2015-01-27 Govind

Любые ошибки в консоли? – icke

http://jsfiddle.net/70hg59ua/ Кажется, что часть show/hide работает, кроме ссылки «Все», потому что она не имеет привязанной к ней функции «onclick». Каков ваш ожидаемый результат? – icke

@icke no .. нет никакой ошибки :) – Govind

Добавление атрибута как data-filter недостаточно. Вы должны каким-то образом реализовать фильтрацию.

Например, вы можете сделать это в функции changeContent, которую вы уже имеете.

Вы могли:

var filter = "."+$("#"+str).attr("data-type");

получить класс, который вы хотите отфильтровать из атрибута data-type в ваших якорных тегах, а затем

$(".main_content ul li"+filter).show();

показывает только те элементы списка, которые соответствуют классу.

Пример: http://jsfiddle.net/70hg59ua/2/

источник

2015-01-27 11:47:40 icke

как скрыть/показать DIV с фильтрацией данных

ответ

Смежные вопросы