0

我正在尝试为需要根据多个标准优化结果的问题找到解决方案。我有多个选择标准：

  1. 水果——苹果橙葡萄
  2. 蔬菜——番茄土豆西兰花
  3. 坚果——核桃花生杏仁
  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。目前，结果仅根据一个标准（关键字）进行过滤，但我需要以某种方式包含其他标准。

4

2 回答 2

0

用下面提到的脚本替换您的整个 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/ ”。请在您的最后检查。

于 2013-06-06T13:30:59.907 回答
0

这是一个相对较短的 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)
    });
}
于 2013-06-06T14:42:12.477 回答