用于检查不规则组合条目的 indexOf 不起作用？

Question

我有以下 JavaScript 来检查组合条目：

var proteins = [
    "charred sirloin steak", 
    "roasted salmon", 
    "grilled chicken", 
    "grilled salmon", 
    "jerk chicken",
    "miami ribs", 
    "charred steak", 
    "tandoori chicken supreme"
];

var sides = [
    "israeli couscous salad",
    "kale caesar", 
    "field o greens",
    "grilled broccoli",
    "greek salad", 
    "coconut curry quinoa salad",
    "vegetable egg fried rice",
    "general tao brussel sprouts",
    "tokyo slaw",
    "mac cheese",
    "potato salad"
];

var comboEntries = document.querySelectorAll('.combo-display .combo-item');
for (var i = 0; i < comboEntries.length; i++) {
  if (proteins.indexOf(comboEntries[i].innerText) == -1 || sides.indexOf(comboEntries[i].innerText) == -1) {
    comboEntries[i].style.color = "orangered";
    console.log(comboEntries[i].innerText + " is not a regular combo item.");
  }
}

但是，这会将所有 comboEntries 输出为不规则项。如果我将条件反转为 != -1 我可以看到它正常工作，突出显示常规项同时排除不规则项。

我在这里做错了什么？一定是简单的东西我没认出来。

已编辑：抱歉，我之前没有包含 HTML，因为这是生成内容的在线厨房显示屏的一部分。这是一个例子：

<div class="combo-display">
<p><strong>Protein 1:</strong> <span id="protein-1" class="combo-item">Custom item</span></p><div class="item-count"> x <span>1</span></div>
<p><strong>Protein 2:</strong> <span id="protein-2" class="combo-item">Custom item</span></p><div class="item-count"> x <span>1</span></div>
<p><strong>Protein 3:</strong> <span id="protein-3" class="combo-item">grilled chicken</span></p><div class="item-count"> x <span class="grilled-chicken-counter">1</span></div>
<p><strong>Side 1:</strong> <span id="side-1" class="combo-item">Custom item</span></p><div class="item-count"> x <span>1</span></div>
<p><strong>Side 2:</strong> <span id="side-2" class="combo-item">kale caesar</span></p><div class="item-count"> x <span class="kale-caesar-counter">1</span></div>
<p><strong>Side 3:</strong> <span id="side-3" class="combo-item">field o greens</span></p><div class="item-count"> x <span class="field-o-greens-counter">1</span></div>
</div>

所以custom item应该突出显示为不规则项

Answer 1

尽管您的问题由于缺少 HTML 代码而不清楚，但如果我没有错，那么您正在尝试 突出显示 值既不在 proteins 也不在 sides.

为此，您应该在 if condition 中使用 &&。

这是一个工作片段：

var proteins = [
    "charred sirloin steak", 
    "roasted salmon", 
    "grilled chicken", 
    "grilled salmon", 
    "jerk chicken",
    "miami ribs", 
    "charred steak", 
    "tandoori chicken supreme"
];

var sides = [
    "israeli couscous salad",
    "kale caesar", 
    "field o greens",
    "grilled broccoli",
    "greek salad", 
    "coconut curry quinoa salad",
    "vegetable egg fried rice",
    "general tao brussel sprouts",
    "tokyo slaw",
    "mac cheese",
    "potato salad"
];

var comboEntries = document.querySelectorAll('.combo-display .combo-item');
for (var i = 0; i < comboEntries.length; i++) {
  if (proteins.indexOf(comboEntries[i].innerText) == -1 && sides.indexOf(comboEntries[i].innerText) == -1) {
    comboEntries[i].style.color = "orangered";
    console.log(comboEntries[i].innerText + " is not a regular combo item.");
    }
  }

<div class="combo-display">
  <div class="combo-item">
   israeli couscous salad
  </div>
  <div class="combo-item">
   vegetable egg fried rice
  </div>
  <div class="combo-item">
   vegetable egg fried rice1
  </div>
  <div class="combo-item">
   roasted salmon
  </div>
</div>

用于检查不规则组合条目的 indexOf 不起作用？

indexOf to Check for Irregular Combo Entries Not Working?

javascript

arrays

for-loop

indexof