静态数据示例

Question

我正在尝试按其数据属性过滤用户，我有一个名为user-append的主要div，其中包含我从ajax get请求获得的用户，可以有3个用户或100个用户，其动态，这是我的目前有一个用户的div

<div id="user-append">
    <div class="fc-event draggable-user" data-profesion="'+user.profesion+'" id="user_'+user.id+'" style="z-index: 9999;">
        <div class="container-fluid">
            <input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
            <div class="row" style="justify-content: center;">
                <div class="col-xs-3 avatar-col">
                    <div class="innerAvatarUserLeft">
                        <img src="'+getUserImage(user.avatar)+'" width="100%" style="margin: 0 auto;">
                    </div>
                </div>
                <div class="col-xs-9 data-col">
                    <p class="fullName dataText">'+user.fullName+'</p>
                    <p class="usr_Gender dataText">Male</p>
                    <div style="position: relative">
                        <li class="availableUnavailable"></li>
                        <li class="usr_profesion dataText">AVAILABLE</li>
                    </div>
                    <p class="user_id" style="float:right;margin: 3px">'+user.employee_id+'</p>
                </div>
            </div>
        </div>
    </div>
</div>

你可以看到我有data-profesion属性，我试图过滤用户取决于他们拥有的专业，我得到像这样的ajax请求

$.ajax({
    url: "/rest/users",
    success: function (users) {
        var options = [];
        $user = $("#append_users");
        $.each(users, function (i, user) {
            options.push({
                'profession': user.prof.Profession,
                'gender': user.prof.Gender
            });
            userArr.push({
                'id': user.id,
                'firstName': user.prof.FirstName,
                'lastName': user.prof.LastName,
                'fullName': user.prof.FirstName + ' ' + user.profile.LastName,
                'email': user.email,
                'avatar': user.prof.Photo,
                'profesion': user.prof.Profession
            });

            $('#filterByProfession').html('');
            $('#filterByGender').html(''); // FIRST CLEAR IT
            $.each(options, function (k, v) {
                if (v.profession !== null) {
                    $('#filterByProfession').append('<option>' + v.profession + '</option>');
                }
                if (v.gender !== null) {
                    $('#filterByGender').append('<option>' + v.gender + '</option>');
                }
            });
        });
    });

现在我试图通过data-profesion过滤用户，更改我从ajax get请求中填充的select选项，它应该只显示包含该数据profesion值的用户，像这样

$('#filterByProfession').change(function () {
    var filterVal = $(this).val();
    var userProfVal = $(".fc-event").attr("data-profesion");
    if (filterVal !== userProfVal) {
    }
});

Answer 1

您可以使用CSS选择器查找这些用户，然后将其隐藏起来：

$('#filterByProfession').change(function () {
    // first hide ALL users
    $('.draggable-user').hide()
    // then filter out the ones with the correct profession:
    //    (you need to escape the used quote)
        .filter('[data-profesion="' + $(this).val().replace(/"/g, '\\"') + '"]')
    //  ... and show those
        .show();
});

Answer 2

尝试使用此

$(".fc-event[data-profesion='" + filterVal + "']").show();
$(".fc-event[data-profesion!='" + filterVal + "']").hide();

Answer 3

您试图在整个className选择器中获取userProfVal，该选择器可以返回多个元素。

var userProfVal = $(".fc-event").attr("data-profesion");
                     ^

使用jQuery函数.data()获取数据属性。

使用.each查看此代码段，以循环此选择器.fc-event返回的所有元素：

$('#filterByProfession').change(function() {
  var filterVal = $(this).val();
  $(".fc-event").hide().each(function() {
    if ($(this).data("profesion") === filterVal) {
      $(this).show();
    }
  });
});

静态数据示例

＆＃13;

$('#filterByProfession').change(function() {
  var filterVal = $(this).val();
  $(".fc-event").hide().each(function() {
    if ($(this).data("profesion") === filterVal) {
      $(this).show();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='filterByProfession'>
  <option>-----</option>
  <option>Developer</option>
  <option>Cloud computing</option>  
</select>

<div id="user-append">
  <div class="fc-event draggable-user" data-profesion="Developer" id="user_1" style="z-index: 9999;">
    <div class="container-fluid">
      <input type="hidden" value="1" id="user_1_value" class="userId">
      <div class="row" style="justify-content: center;">
        <div class="col-xs-3 avatar-col">
          <div class="innerAvatarUserLeft">
            <img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;">
          </div>
        </div>
        <div class="col-xs-9 data-col">
        Developer
          <p class="fullName dataText">Ele</p>
          <p class="usr_Gender dataText">Male</p>
          <div style="position: relative">
            <li class="availableUnavailable"></li>
            <li class="usr_profesion dataText">AVAILABLE</li>
          </div>
          <p class="user_id" style="float:right;margin: 3px">11</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="user-append">
  <div class="fc-event draggable-user" data-profesion="Cloud computing" id="user_2" style="z-index: 9999;">
    <div class="container-fluid">
      <input type="hidden" value="2" id="user_2_value" class="userId">
      <div class="row" style="justify-content: center;">
        <div class="col-xs-3 avatar-col">
          <div class="innerAvatarUserLeft">
            <img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;">
          </div>
        </div>
        <div class="col-xs-9 data-col">
          Cloud computing
          <p class="fullName dataText">Enri</p>
          <p class="usr_Gender dataText">Male</p>
          <div style="position: relative">
            <li class="availableUnavailable"></li>
            <li class="usr_profesion dataText">AVAILABLE</li>
          </div>
          <p class="user_id" style="float:right;margin: 3px">11</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13; 看到？根据所选选项隐藏这些部分。

按数据属性Jquery过滤用户

3 个答案:

静态数据示例