javascript - 选择具有特定 id 和类的所有元素

Question

(已更新)。上下文是我试图开始工作的下面的函数。我目前在控制台中闲逛以查看发生了什么，第一个变量 selectChoices 正在记录一个空的 NodeList。似乎无法选择 id 为 translateBoxCover 且类为 choices 的所有元素。

function correctChoices() {
    var selectChoices = document.querySelectorAll('#translateBoxCover .choices');
    var checkChoicesArray = [];
    for (var i = 0; i < selectChoices.length; i++) {
        checkChoicesArray.push(selectChoices[i].textContent);
        console.log(checkChoicesArray);
    }
    if (checkChoicesArray.join('') == '我很很很喜欢中国') {
        return true;
    }
}

(已更新)。我添加了更多上下文:一个 javascript 函数，用于删除 #translateBoxCover 之间的 .choices。单击 .choices 时，它会添加到 ID 为 #translateBoxCover 的 div 中。单击提交按钮(不包括在内)时将触发函数 CorrectChoices，以查看 .choices 文本内容的顺序是否正确。下面是有问题的 html 文件。似乎每个人都同意我在应该使用类时错误地使用了 id？

$('.choices').on('click', function() {
  var $this = $(this);
  if ($this.parent().attr('id') == 'translateBoxCover') {
    var index = $this.data('index');
    if (index == 0) {
      $this.prependTo($("#choicesWrapper"));
    } else {
      $this.insertAfter($("#choicesWrapper .choices").eq(index-1));
    }
  } else {
    $this.data('index', $this.index());
    $this.appendTo("#translateBoxCover");
  }
});
    <div id = 'translateBoxWrapper'>
        <div id = 'translateBox'>
            <div id = 'translateBoxCover'></div>
        </div>
    </div>

    <div id = 'choices'>
        <div id = 'choicesWrapper'>
            <div class = 'choices'>很</div>
            <div class = 'choices'>中国</div>
            <div class = 'choices'>美国</div>
            <div class = 'choices'>爱</div>
            <div class = 'choices'>喜欢</div>
            <div class = 'choices'>我</div>
            <div class = 'choices'>很</div>
            <div class = 'choices'>很</div>
            <div class = 'choices'>他</div>
            <div class = 'choices'>川普</div>
            <div class = 'choices'>厕所</div>
            <div class = 'choices'>想</div>
            <div class = 'choices'>你</div>
        </div>
    </div>

Answer 1

您可以在选择器中使用 id 和类，例如 #id.class。

var el = document.querySelector( '#my_id.my_class' );
console.log( el );

<div class="my_class"></div>
<div class="my_class"></div>
<div id="my_id" class="my_class"> </div>

值得注意的是，正如已经指出的那样，id 应该是唯一的，因此如果您使用 id 作为选择器，您不应该还需要一个类是多余的。

var el = document.querySelector( '#my_id' );
console.log( el );

<div class="my_class"></div>
<div class="my_class"></div>
<div id="my_id" class="my_class"></div>
<div id="another_id" class="my_class"></div>