javascript - CSS选择器，带-作为运算符

This question already has answers here:

JavaScript property access: dot notation vs. brackets?
                                
                                    （13个回答）
                                
                        
                                2年前关闭。
            
                    
我正在使用listjs并具有以下代码，您可以在其中根据预定义的文本过滤列表。

在以下代码段中，您应该可以按[全部，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选择器的情况下使代码正常工作。有什么办法可以做到这一点？或至少可以解释我现在使用方式有问题的人。

最佳答案

如果属性名称本身不是valid identifier，则需要使用其他方法来引用属性。

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>