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.class等选择器中使用ID和类。

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>

Answer 2

您可以通过连接id和类名来和选择器。

var selectChoices = document.querySelectorAll('#translateBoxCover.choices');

Answer 3

编辑：我误读了所寻找的内容。如果您希望按ID分配特定元素，则按照以下情况执行以下操作。

var selectChoices = document.querySelectorAll('#translateBoxCover, .choices')

应该阅读（注意#translateBoxCover和.choices之间的逗号）：

    {this.props.customer.data ? this.props.customer.data.map(customers => 
      <p>
        {customers.name}
      </p>) : null}

选择具有特定ID和类的所有元素

3 个答案: