作为运算符的CSS选择器

Question

我使用的是李斯特，下面的代码可以根据预定义的文本过滤列表。

在下面的片段中，您应该能够在1900年或2000年之前进行过滤，但是如果您试图按年进行筛选，则不起作用。

从控制台日志中，我可以收集到，在if (item.values().rsc-born == $val)中的筛选器函数中，.rsc-born不作为css选择器，而是返回born is not defined。

​

var options = {
  valueNames: ['rsc-name', 'rsc-born'],
};

var userList = new List('users', options);

$('#filter-none').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  userList.filter();
  return false;
});

$('#filter-1').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  $val = this.innerHTML;
  userList.filter(function(item) {
    if (item.values().rsc-born == $val) {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-2').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  $val = this.innerHTML;
  userList.filter(function(item) {
    if (item.values().rsc-born == $val) {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

.rsc-filter-item:hover {
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">

  <input class="search" placeholder="Search" />

  <ul class="rsc-filter filter">
    Filter by year<br>
    <li class="rsc-filter-item active" id="filter-none">Show All</li>
    <li class="rsc-filter-item" id="filter-1">1900</li>
    <li class="rsc-filter-item" id="filter-2">2000</li>
  </ul>

  <ul class="list">
    <li>
      <h3 class="rsc-name">Jonny</h3>
      <p class="rsc-born">2000</p>
    </li>
    <li>
      <h3 class="rsc-name">Jonny</h3>
      <p class="rsc-born">2000</p>
    </li>
    <li>
      <h3 class="rsc-name">Martina</h3>
      <p class="rsc-born">1900</p>
    </li>
    <li>
      <h3 class="rsc-name">Gustav</h3>
      <p class="rsc-born">1900</p>
    </li>
  </ul>

</div>

​

因此，我将rsc-born重命名为rsc_born，正如您在下面的片段中看到的那样，它的工作原理就像一种魅力。我假设-在rsc和born之间被认为是一个运算符，这就是为什么它试图找到born的值。

​

var options = {
  valueNames: ['rsc-name', 'rsc_born'],
};

var userList = new List('users', options);

$('#filter-none').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  userList.filter();
  return false;
});

$('#filter-1').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  $val = this.innerHTML;
  userList.filter(function(item) {
    if (item.values().rsc_born == $val) {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-2').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  $val = this.innerHTML;
  userList.filter(function(item) {
    if (item.values().rsc_born == $val) {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

.rsc-filter-item:hover {
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">

  <input class="search" placeholder="Search" />

  <div class="rsc-filter filter">
    Filter by year<br><br>
    <div class="rsc-filter-item active" id="filter-none">Show All</div>
    <div class="rsc-filter-item" id="filter-1">1900</div>
    <div class="rsc-filter-item" id="filter-2">2000</div>
  </div>

  <ul class="list">
    <li>
      <h3 class="rsc-name">Jonny</h3>
      <p class="rsc_born">2000</p>
    </li>
    <li>
      <h3 class="rsc-name">Jonny</h3>
      <p class="rsc_born">2000</p>
    </li>
    <li>
      <h3 class="rsc-name">Martina</h3>
      <p class="rsc_born">1900</p>
    </li>
    <li>
      <h3 class="rsc-name">Gustav</h3>
      <p class="rsc_born">1900</p>
    </li>
  </ul>

</div>

​

我对JS很陌生，我不知道如何使代码工作，而不必重命名css选择器。有办法做到这一点吗？或者至少，有人能解释我现在使用它的方式有什么问题。

Answer 1

当属性名称本身不是有效标识符时，需要使用不同的方法来引用属性。

obj.prop与obj['prop']相同

因此，下面的小改动起作用了：

​

var options = {
  valueNames: ['rsc-name', 'rsc-born'],
};

var userList = new List('users', options);

$('#filter-none').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  userList.filter();
  return false;
});

$('#filter-1').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  $val = this.innerHTML;
  userList.filter(function(item) {
    if (item.values()['rsc-born'] == $val) { // Change #1
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-2').click(function() {
  $('.rsc-filter .rsc-filter-item').removeClass('active');
  $(this).addClass('active');
  $val = this.innerHTML;
  userList.filter(function(item) {
    if (item.values()['rsc-born'] == $val) { // Change #2
      return true;
    } else {
      return false;
    }
  });
  return false;
});

.rsc-filter-item:hover {
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">

  <input class="search" placeholder="Search" />

  <ul class="rsc-filter filter">
    Filter by year<br>
    <li class="rsc-filter-item active" id="filter-none">Show All</li>
    <li class="rsc-filter-item" id="filter-1">1900</li>
    <li class="rsc-filter-item" id="filter-2">2000</li>
  </ul>

  <ul class="list">
    <li>
      <h3 class="rsc-name">Jonny</h3>
      <p class="rsc-born">2000</p>
    </li>
    <li>
      <h3 class="rsc-name">Jonny</h3>
      <p class="rsc-born">2000</p>
    </li>
    <li>
      <h3 class="rsc-name">Martina</h3>
      <p class="rsc-born">1900</p>
    </li>
    <li>
      <h3 class="rsc-name">Gustav</h3>
      <p class="rsc-born">1900</p>
    </li>
  </ul>

</div>

​