Javascript 按 element.data 过滤行

Question

当单击具有相同值的按钮时，我试图按特定列值过滤我的表，并且我想隐藏未选择的其他值。我正在努力挖掘数据产品的值(value)。过滤器似乎根本不起作用。这是我的脚本文件中的代码。

$('.filter-btns.top input').on('click', function () {
    $('.filter-btns.top input').removeClass('active');
    $(this).addClass('active');
});

$('.filter-button').on('click', function () {
    var button = $(this);
    var name = button.attr('name');
    var count = 0;


    $('#results-tbody tr').each(function () {
        var element = $(this);
        element.data('filters', element.data('filters').replace(/button/g, ''));
        switch (name) {
            case 'flexitouch':
                if (element.data('product') !== "flexitouch") {
                    element.data('filters', element.data('filters') + 'button');
                }
                break;
            case 'actitouch':
                if (element.data('product') !== "actitouch") {
                    element.data('filters', element.data('filters') + 'button');
                }
                break;
            case 'entre':
                if (element.data('product') !== "entre") {
                    element.data('filters', element.data('filters') + 'button');
                }
                break;
        }
        count = count + hideOrShow(element);

    });
    setResultsCount(count);
});

这是它引用的 cshtml 文件

   <div class="filter-btns top">
        <h4 class="filter-heading">Quick Search By</h4>
        <input type="button" id="all" name="all" class="button1 filter-button active" value="All" />
        <input type="button" id="flexitouch" name="flexitouch" class="button1 filter-button" value="Flexitouch" />
        <input type="button" id="actitouch" name="actitouch" class="button1 filter-button" value="ACTitouch" />
        <input type="button" id="entre" name="entre" class="button1 filter-button" value="Entre" />
    </div>
  <table class="table results-table">
            <tr>
                <th><i id="count"> (@ViewBag.Count found) </i></th>
            </tr>
            <tbody id="reults-tbody">
                @foreach (var item in Model.SearchResults)
                {

                    <tr class="table__row-link" data-patientname"="@item.PatientLastName , @item.PatientLastName" 
                        data-product="@item.Product.Replace("+","")" data-referral="@item.d_Order_Date" data-oc="@item.d_Order_Complete_Date"
                        data-approved="@item.ApprovedDate" data-inactive="@item.d_Inactive_Date" data-training="@item.LastTrainedDate" data-links="@item.Links" data-filters="none">
                        <td>

                            <a href="@Url.Action("Details", "Patient", new { patientID = item.PT_RecID })">
                                <strong>@Html.DisplayFor(modelItem => item.PatientLastName, item.PatientFirstName) (@Html.DisplayFor(modelItem => item.PT_RecID))</strong>
                                <br />
                                <strong>Product: </strong>@Html.DisplayFor(modelItem => item.Product)
                                <br />
                                <strong>Referral: </strong>@Html.DisplayFor(modelItem => item.d_Order_Date)
                                <br />
                                <strong>OC: </strong> @Html.DisplayFor(modelItem => item.d_Order_Complete_Date)
                                <br />
                                <strong>Shipped: </strong> @Html.DisplayFor(modelItem => item.d_Ship_Date)
                                <br />
                                <strong>Approved: </strong> @Html.DisplayFor(modelItem => item.ApprovedDate)
                                <br />
                                <strong>Inactive: </strong> @Html.DisplayFor(modelItem => item.d_Inactive_Date)
                                <br />
                                <strong>Training: </strong> @Html.DisplayFor(modelItem => item.LastTrainedDate)
                                <br />
                                <strong>Links: </strong> @Html.DisplayFor(modelItem => item.Links)
                                <br />
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table> 

Answer 1

我建议使用内置的 .filter() 方法。 当您有一组用户时，您可以使用此方法创建一个新的过滤数组。

使用示例:

html

<button class="agetrigger" data-age="25">25</button>
<button class="agetrigger" data-age="22">22</button>
<button class="agetrigger" data-age="28">28</button>

js

 const students = [
  {
    "index": 0,
    "isActive": false,
    "age": 25,
    "eyeColor": "blue",
    "name": "Roach Hunter",
    "gender": "male"
  },
  {
    "index": 1,
    "isActive": true,
    "age": 22,
    "eyeColor": "brown",
    "name": "Dena Terrell",
    "gender": "female"
  },
  {
    "index": 2,
    "isActive": true,
    "age": 28,
    "eyeColor": "blue",
    "name": "Vanessa Guthrie",
    "gender": "female"
  }
];

var filterAge = null;
$('.agetrigger').on('click', function() {

  filterAge = $(this).data('age');    
  const getAgeStudent = students.filter(student => student.age >= filterAge);

  console.log(getAgeStudent);
});

结果我有一个包含过滤后的学生的新数组。 在您的情况下，您应该将应返回的条件存储在变量中并将其传递给方法。

<小时/>

更新: 我已经使用 jQuery 来更新解决方案。 JSFiddle exmaple