Question

我真的被困在以下方面：我需要根据数据属性值过滤大量项目，我已经实现了这一点，问题是当我想显示属于特定选择的所有项目时。我尝试在html中的同一元素中添加多个数据属性，但我发现这是不允许的：还使用了if条件，我尝试将值分开，如果value不是'all'而不是......但是没有取得任何成功。所以这就是我最后一个工作代码最终的地方。

HTML：

<select id="langOption" class="filterOptions">
    <option data-lang-option="all" value="all">All</option>
    <option data-lang-option="english" value="en">English</option>
    <option data-lang-option="spanish" value="sp">Spanish</option>
</select>

<select id="categoryOption" class="filterOptions">
    <option data-category-option="all" value="all">All</option>
    <option data-category-option="humour" value="hu">Humour</option>
    <option data-category-option="romance" value="ro">Romance</option>
</select>

<div class="displayBox" data-lang-option="english" data-category-option="humour">
    First Box English
</div>

<div class="displayBox" data-lang-option="spanish" data-category-option="humour">
    First Box Spanish
</div>

<div class="displayBox" data-lang-option="english" data-category-option="humour">
    Second Box English
</div>

<div class="displayBox" data-lang-option="spanish" data-category-option="romance">
    Second Box Spanish
</div>

JS：

$('.filterOptions').change(function(){

    var theChosenLang = $('#langOption').find(':selected').attr('data-lang-option');

    var theChosenCat = $('#categoryOption').find(':selected').attr('data-category-option');


    $('.displayBox').css('display','none');

    $('.displayBox[data-lang-option="' + theChosenLang + '"][data-category-option="'+ theChosenCat +'"]').fadeIn();

});

有人可以帮我解决这个问题，以便在选择所有属于该选择的所有元素并且也属于其他选择值时。非常感谢

Answer 1

我的建议是使用变量存储选择器的名称，如果已选择的选项不是全部，则将其作为function abc(){ $.ajax({url: "demo_test.txt", success: function(result){ var scope = angular.element('[ng-controller=namesCtrl]').scope() scope.names = result; // here if(!scope.$$phase) scope.$apply(); //this will make available names in namesCtrl scope. }}); }添加到选择器过滤。否则，根本不要过滤该选项 - 意思是，全部显示。

希望我能理解你，它会解决你的问题。

data-attribute

jsFiddle

jQuery在选中时显示特定类别的所有项目

1 个答案: