Результаты фильтра Javascript/jquery основаны на множественном выборе

Question

Я пытаюсь найти решение проблемы, где мне нужно уточнить результат на основе нескольких критериев. У меня есть несколько критериев отбора:

1. Фрукты - яблоко оранжевого виноград
2. овощи - помидоры картофель брокколи
3. Nuts - орех арахис миндаль
4. зерновых - кукурузы пшеница рис
5. специя - корица имбирь перец

Пользователь может выбрать только один критерий из каждой группы, например, вы можете выбрать яблоки, но не апельсины или виноград. См. jsfiddle.

Тогда у меня есть несколько корзин с разными предметами.

<div class="results"> 
     <div class="basket" data-keywords="apple broccoli peanut rice cinnamon">Result1</div> 
     <div class="basket" data-keywords="apple tomato almond wheat pepper">Result2</div> 
     <div class="basket" data-keywords="orange potato peanut rice ginger">Result3</div> 
     <div class="basket" data-keywords="apple potato walnut corn ginger">Result4</div> 
     <div class="basket" data-keywords="grape broccoli peanut corn ginger">Result5</div> 
</div> 

Но проблема в том, что эти результаты должны быть уточнены на основе нескольких критериев. Например, я выбрал яблоки, а затем помидор, поэтому мне нужно уточнить результаты, чтобы этот пользователь мог видеть только результаты с яблоками и помидорами.

Вот мой jsfiddle. На данный момент результаты фильтруются только на основе одного критерия (ключевое слово), но мне нужно каким-то образом включить другие.

Answer 1

Заменить всю JavaScript/Jquery скрипт с указанными ниже сценариями и проверить изменения с урами требований

$(document).ready(function(){ 
    $('a.sortLink1').on('click',function(event){ 
    event.preventDefault(event); 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     var SelectedAry = $(".selected"); 
     var flag = false; 
     if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 
    } 
    else{ 
     $('a.sortLink1').removeClass('selected'); 
     $(this).addClass('selected'); 
     var SelectedAry = $(".selected"); 

     var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 

    }} 
     ); 
    $('a.sortLink2').on('click',function(event){ 
    event.preventDefault(event); 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     var SelectedAry = $(".selected"); 
     var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 
    } 
    else{ 
     $('a.sortLink2').removeClass('selected'); 
     $(this).addClass('selected'); 
     var SelectedAry = $(".selected"); 
     var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 

    }} 
     ); 

    $('a.sortLink3').on('click',function(event){ 
    event.preventDefault(event); 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     var SelectedAry = $(".selected"); 
     var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 
    } 
    else{ 
     $('a.sortLink3').removeClass('selected'); 
     $(this).addClass('selected'); 
     var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 

    }} 
     ); 

    $('a.sortLink4').on('click',function(event){ 
    event.preventDefault(event); 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     var SelectedAry = $(".selected"); 
    var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 
    } 
    else{ 
     $('a.sortLink4').removeClass('selected'); 
     $(this).addClass('selected'); 
     var SelectedAry = $(".selected"); 
     var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 

    }} 
     ); 
    $('a.sortLink5').on('click',function(event){ 
    event.preventDefault(event); 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     var SelectedAry = $(".selected"); 
     var flag = false; 
     if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 
    } 
    else{ 
     $('a.sortLink5').removeClass('selected'); 
     $(this).addClass('selected'); 
     var SelectedAry = $(".selected"); 
     var flag = false; 
        if(SelectedAry != undefined && SelectedAry.length == 0) 
      flag = true 
     sortResult(flag); 

    }} 
     ); 

$('.basket').addClass('showMe'); 
positionThumbnails(); 

    }); 


     function sortResult (flag){ 

       $('.results .basket').each(function(){ 
       var thumbnailKeywords = $(this).attr('data-keywords'); 
       if(flag){ 
       $(this).addClass('showMe').removeClass('hideMe'); 
       }else{ 
        var mymatch = false; 
        var SelectedAry = $(".selected"); 
        SelectedAry.each(function(){ 
        var newKeyword = $(this).attr("data-keyword"); 

        var test_regexp = new RegExp("\\b"+newKeyword+"\\b"); 
        mymatch = thumbnailKeywords.match(test_regexp); 
         if(!mymatch) 
          return false; 
        }); 

        if(mymatch){ 
        $(this).addClass('showMe').removeClass('hideMe'); 
        }else{ 
        $(this).addClass('hideMe').removeClass('showMe'); 
        } 
       } 
       }); 
       positionThumbnails(); 
      } 

    function positionThumbnails(){ 
    $('.basket.hideMe').animate({opacity:0},500,function(){ 
    $(this).css({'display':'none'}); 
}); 
$('.basket.showMe').each(function(index){ 
    $(this).css('display','block').animate({opacity:1},500) 
}); 

}

Пожалуйста, проверьте ваши требования и сравните ваши сценарии тоже. за знания jsfiddle, пожалуйста, посетите «http://jsfiddle.net/LSMxC/32/». Пожалуйста, проверьте в конце.

Answer 2

Вот относительно короткий JS скрипт для разбора HTML для матчей:

$(document).ready(function(){ 
    $(".sorting > div a").click(function(){ 
     $(this).siblings().removeClass('selected'); 
     if ($(this).hasClass('selected')) { 
      $(this).removeClass('selected'); 
     } else { 
      $(this).addClass('selected'); 
     } 

     $('.results .basket').each(function(){ 
      var basketKeywords = $(this).attr('data-keywords'); 
      var match = true; 
      $(".sorting > div a.selected").each(function(){ 
       if (!basketKeywords.match($(this).attr('data-keyword'))){ 
        match = false; 
       } 
      }); 

      if (match){ 
       $(this).addClass('showMe').removeClass('hideMe'); 
      } else { 
       $(this).addClass('hideMe').removeClass('showMe'); 
      } 
     }); 

     positionThumbnails(); 
    }); 
}); 

function positionThumbnails(){ 
    $('.basket.hideMe').animate({opacity:0},500,function(){ 
     $(this).css({'display':'none'}); 
    }); 
    $('.basket.showMe').each(function(index){ 
     $(this).css('display','block').animate({opacity:1},500) 
    }); 
}