Question

您好我正在尝试使用querySelectorAll来显示一些元素以捕获属性，并使用DOM来显示元素的css，直到现在面临“语法错误：指定了无效或非法字符串”将会在这里获得一些帮助。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>select sort function</title>
<style>
a{text-decoration:none;display:none;font-family:sans-serif,arial;}
</style>
</head>
<body>
<select id="sortsel" onchange="listFunction()">
    <option value='0'>- All Sorting -</option>
    <option value='1'>Sort A</option>
    <option value='2'>Sort B</option>
</select><br/><br/>
<div>
<a href="javascript:void(0)" data-sortid="1">Sort A sub 1</a><br/>
<a href="javascript:void(0)" data-sortid="1">Sort A sub 2</a><br/>
<a href="javascript:void(0)" data-sortid="1">Sort A sub 3</a><br/>
<a href="javascript:void(0)" data-sortid="2">Sort B sub 1</a><br/>
<a href="javascript:void(0)" data-sortid="2">Sort B sub 2</a><br/>
<a href="javascript:void(0)" data-sortid="2">Sort B sub 3</a><br/>
</div>
<script>
function listFunction(){
    var selectSort = document.getElementById("sortsel");
    var selectedSort = selectSort.options[selectSort.selectedIndex].value;
    console.log(selectedSort);
    var testing = '[';
    testing += 'data-sortid="';
    testing += selectedSort;
    testing += '"]';
    console.log(testing);
    document.querySelectorAll(testing).style.display="block";
}
</script>
</body>
</html>

非常感谢这里的任何帮助。

Answer 1

如果我们想查询节点属性，我们可以使用 [data-sortid ='1'] 之类的结构

的Javascript

function listFunction(){
    var selectSort = document.getElementById("sortsel");
    var selectedSort = selectSort.options[selectSort.selectedIndex].value;
    console.log(selectedSort);
    var testing = '';
    testing += '[data-sortid="';
    testing += selectedSort;
    testing += '"]';
    console.log(testing);

    [].forEach.call(document.querySelectorAll(testing), function (el) {
        el.style.display="block";
    });
}

Answer 2

sanjay的答案中的代码优化。 https://stackoverflow.com/a/38198918/3391120

运行代码段以查看结果。如果您单击选择框中的第一个项目，它将重置排序结果。

＆＃13;

function listFunction(){
    var selectSort = document.getElementById("sortsel");
    var selectedSort = selectSort.options[selectSort.selectedIndex].value;
  var sortResultItems =  document.querySelectorAll("[data-sortid]");
  globalVar = sortResultItems;

sortResultItems.forEach(function(item, index) {
  item.style.display = "none";
  if((parseInt(selectedSort) !== 0) && parseInt(item.dataset.sortid) === parseInt(selectedSort)){
    item.style.display = "block";
  }
});
}

＆＃13;

a{text-decoration:none;font-family:sans-serif,arial;}
.sort-result-item {
  display:none;
}

＆＃13;

<select id="sortsel" onchange="listFunction()">
    <option value="0">- All Sorting -</option>
    <option value="1">Sort A</option>
    <option value="2">Sort B</option>
</select><br/><br/>
<div>
  <div id="sortResults">
    <div data-sortid="1" class="sort-result-item">
      <a href="javascript:void(0)">Sort A sub 1</a><br/>
      <a href="javascript:void(0)">Sort A sub 2</a><br/>
      <a href="javascript:void(0)">Sort A sub 3</a><br/>
    </div>
    <div data-sortid="2" class="sort-result-item">
      <a href="javascript:void(0)">Sort B sub 1</a><br/>
      <a href="javascript:void(0)">Sort B sub 2</a><br/>
      <a href="javascript:void(0)">Sort B sub 3</a><br/>
    </div>
  </div>


</div>

＆＃13;

Answer 3

您的查询必须与[data-sortid="1234"]类似。您缺少周围的括号[..]。

试试这个：

var testing = '[';
testing += 'data-sortid="';
testing += selectedSort;
testing += '"]';

Answer 4

问题是document.querySelectorAll(testing)返回一个元素数组。您可以迭代它们并像这样更改style.diplay：

  var arguments = document.querySelectorAll(testing);
  for (var i = 0; i < arguments.length; i++) {
    arguments[i].style.display = "block";
  }

请参阅演示http://codepen.io/8odoros/pen/ZOyoBN

使用select到DOM css使用属性

4 个答案: