Question

我想使用jquery创建自定义过滤器。我从这里开始

var filters = {};
var data = [];
var filters = {};
filters.id = 0;
filters.title = "Users";
data[0] = filters;
var filters = {};
filters.id = 1;
filters.title = "Title";
data[1] = filters;
var filters = {};
filters.id = 2;
filters.title = "Start date";
data[2] = filters;
var filters = {};
filters.id = 3;
filters.title = "End date";
data[3] = filters;
var filters = {};
filters.id = 4;
filters.title = "Price";
data[4] = filters;
var filters = {};
filters.id = 5;
filters.title = "Category";
data[5] = filters;

var i = 0;
$.each(data, function(index, value) {
  if (i < 2) {
    $(".chooseFilter").append("<option data-filter-id=" + value.id + ">" + value.title + "</option>");
  } else {
    $(".chooseFilter").append("<option data-filter-id=" + value.id + " disabled>" + value.title + "</option>");
  }

  i++;
});

var dataHTMLFilters = [];
dataHTMLFilters[0] = '<input class="user" data-filterid="0" type="text" placeholder="Enter username">';
dataHTMLFilters[1] = '<input class="user" data-filterid="1" type="text" placeholder="Enter title">';
dataHTMLFilters[2] = '<input class="user" data-filterid="2" type="text" placeholder="Enter start date">';
dataHTMLFilters[3] = '<input class="user" data-filterid="3" type="text" placeholder="Enter end date">';
dataHTMLFilters[4] = '<input class="user" data-filterid="4" type="text" placeholder="Enter price">';
dataHTMLFilters[5] = '<input class="user" data-filterid="5" type="text" placeholder="Enter category">';



var limits = [];
limits[0] = 5;
limits[1] = 1;
limits[2] = 2;
limits[3] = 3;
limits[4] = 4;
limits[5] = 5;

$("body").on("change", ".chooseFilter", function() {
  var filterId = $(this).find(":selected").attr("data-filter-id");
  $(this).parent().prev().html(dataHTMLFilters[filterId]);
});

var buttons = '<div><button class="add">add</button><button class="remove">remove</button></div>';
$("body").on("click", ".add", function(e) {
  e.preventDefault();

  var filterID = $(this).parent().prev().find("option:selected").attr("data-filter-id");

  $(".filters").append("<div class='filter'><div>" + $(".chooseFilter")[0].outerHTML + '</div>' + buttons + "</div>");

  $(".filter").last().prepend("<div class='sibling'>" + dataHTMLFilters[$(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filter-id")] + "</div>");
  if ($(".chooseFilter option[data-filter-id=" + filterID + "]:selected").length >= limits[filterID]) {
    $(".chooseFilter option[data-filter-id=" + filterID + "]").prop("disabled", true);
    var filterIdSelected = $(".chooseFilter option:not(:disabled)").first().attr("data-filter-id");
    $(".chooseFilter").last().find("option[data-filter-id=" + filterIdSelected + "]").attr("selected", true);
    console.log(dataHTMLFilters[filterIdSelected]);
    $(".chooseFilter").last().parent().prev().html(dataHTMLFilters[filterIdSelected]);
  }

});

$("body").on("click", ".remove", function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters">
  <div class="filter">
    <div class="sibling">
      <input class="user" data-filterid="0" type="text" placeholder="Enter username">
    </div>
    <div>
      <select class="chooseFilter" style="width: 100%;">

      </select>
    </div>

    <div>
      <button class="add ">add</button>
    </div>
  </div>
</div>

过滤器必须满足，与之协同：

在添加，删除和更改时限制注意力。如果limit等于HTML文档中的长度实例，则必须禁用过滤器
基本过滤器是用户，过滤器只有一个标题这两个选项必须不被禁用当事件添加，删除或更改时必须禁用其余

我有什么想法可以做到这一点？我尝试了各种方法，但结果总是相同的，过滤器不兼容。

如果您想了解更多信息应该如何运作，请说。

添加，删除和更改时我会看到这样：

if(users.length >= limit){
//set all option in select where filter is user to disabled = true
}

if(title.length >= limit){
//set all option in select where filter is title to disabled = true
}

if(filters.length > 1){
//options in select set to disable=false
}

if(filters.length < 1){
//options in select set to disable=true and title, users set to false
}

HTML中的Jquery自定义过滤器

0 个答案: