classList.contains()检测含指定类的元素时返回值异常

尝试用classList.contains("gf_tab-active")和!!el.querySelector()两种方法判断元素是否包含指定类，但都未返回true，无法定位问题。以下是对应的JS和HTML代码：

原JS代码 #

const purchaseTabs = document.querySelectorAll('.purchase-option ul li');

// Declare variable for later use
//Note: selling plan ID differentiates subscription-only product from its regular version
var sellingPlan = 684884014;
var activeClassFound = false;
var activeTabIdentifier;
var gutArmorVariantID = 31638158934062;
var variantData = {
  'id': gutArmorVariantID,
  'quantity': 1,
};

// Find out active purchase tab on page load.
purchaseTabs.forEach((el) => {
  console.log("Inside purchaseTabs loop for active tab search");
  console.log("Current el: " + el.innerHTML);
  if (el.classList.contains("gf_tab-active")) {
    console.log("active tab found");
    activeClassFound = TRUE;
    activeTabIdentifier = el.getAttribute("data-index");
    // populate data JSON object and updateCart()
    // Note: 'selling_plan' is needed for subscription only product
    console.log("Active Tab: " + activeTabIdentifier);
    if (activeTabIdentifier == "2") {
      variantData.sellingplan = sellingPlan;
      return false;
    }
  }
});

对应HTML代码 #

<div class="gf_restabs module style1 gf_module-left purchase-option gf_restabs_accordion_0" data-activetab="1" data-tabbgcolor="#FFFFFF" data-tabcolor="#333333" data-inactivetabbgcolor="#e0e0e0" data-inactivetabcolor="#8d8d8d" data-bordercolor="#cecece"
  data-bordersize="2px" data-height="">
  <ul>
    <li class="gf_tab gf_tab-active" data-index="1" style="margin-left: 0px; border: 2px solid rgb(206, 206, 206); background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"><span class="item-content" data-index="1" data-key="content"><div data-label="Text Block" id="e-1688134412404-2" class="element-wrap" data-tool="0" data-icon="gpicon-textblock" data-id="1688134412404-2" data-ver="1"><div class="elm text-edit gf_gs-text-paragraph-1">One-time purchase</div></div></span>
      <span
        class="gf_tab-bottom" style="background-color: rgb(255, 255, 255); height: 2px; bottom: -2px;"></span>
    </li>
    <li class="gf_tab" data-index="2" style="margin-left: -2px; border: 2px solid rgb(206, 206, 206); background-color: rgb(224, 224, 224); color: rgb(141, 141, 141);"><span class="item-content" data-index="2" data-key="content"><div data-label="Text Block" id="e-1688134412404-1" class="element-wrap" data-tool="0" data-icon="gpicon-textblock" data-id="1688134412404-1" data-ver="1"><div class="elm text-edit gf_gs-text-paragraph-1">Subscribe &amp; Save</div></div></span>
      <span
        class="gf_tab-bottom"></span>
    </li>
  </ul><span class="gf_tab-accordion-title"><span></span></span>
  <div data-index="1" data-key="content1" class="item-content gf_tab-panel gf_tab-panel-active" style="top: -2px; background-color: rgb(255, 255, 255); border: 2px solid rgb(206, 206, 206);">
    <div data-label="Text Block" data-key="text-block" data-atomgroup="element" id="e-1688134568274" class="element-wrap" data-icon="gpicon-textblock" data-ver="1" data-id="1688134568274">
      <div class="elm text-edit gf-elm-left gf_gs-text-paragraph-1" data-gemlang="en">
        <p>One-time purchase $54.95</p>
      </div>
    </div>
  </div><span class="gf_tab-accordion-title"><span></span></span>
  <div data-index="2" data-key="content1" class="item-content gf_tab-panel" style="top: -2px; background-color: rgb(255, 255, 255); border: 2px solid rgb(206, 206, 206);">
    <div data-label="Text Block" data-key="text-block" data-atomgroup="element" id="e-1688134503683" class="element-wrap" data-icon="gpicon-textblock" data-ver="1" data-id="1688134503683" style="display: block;">
      <div class="elm text-edit gf-elm-left gf_gs-text-paragraph-1" data-gemlang="en">
        <p>Subscribe &amp; save 15% $46.71</p>
        <p>Delivery every 40 Days</p>
        <p></p>
      </div>
    </div>
  </div>
  <div class="gf_clearfix"></div>
</div>

核心问题与修复步骤 #

1. 语法错误：布尔值大小写错误
   代码中activeClassFound = TRUE;是错误写法，JavaScript的布尔值必须小写，大写TRUE会被识别为未定义变量，直接导致逻辑异常，修正为activeClassFound = true;即可。

2. forEach循环终止逻辑无效
   forEach回调里的return false只会跳过当前迭代，无法终止整个循环。如果需要找到目标元素后停止遍历，改用for...of循环配合break：

   for (const el of purchaseTabs) {
     // 你的判断逻辑
     if (条件满足) {
       break; // 找到目标后终止循环
     }
   }
   

3. DOM加载时机问题
   确保代码在DOM完全加载后执行，否则document.querySelectorAll可能获取不到元素。将代码包裹在DOMContentLoaded事件监听中：

   document.addEventListener('DOMContentLoaded', function() {
     // 你的所有JS代码
   });
   

4. 验证元素选择器有效性
   可以在控制台打印purchaseTabs.length确认是否获取到目标元素，排查选择器拼写错误。

修复后的完整JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const purchaseTabs = document.querySelectorAll('.purchase-option ul li');

  var sellingPlan = 684884014;
  var activeClassFound = false;
  var activeTabIdentifier;
  var gutArmorVariantID = 31638158934062;
  var variantData = {
    'id': gutArmorVariantID,
    'quantity': 1,
  };

  for (const el of purchaseTabs) {
    console.log("Inside purchaseTabs loop for active tab search");
    console.log("Current el: " + el.innerHTML);
    if (el.classList.contains("gf_tab-active")) {
      console.log("active tab found");
      activeClassFound = true;
      activeTabIdentifier = el.getAttribute("data-index");
      console.log("Active Tab: " + activeTabIdentifier);
      if (activeTabIdentifier == "2") {
        variantData.sellingplan = sellingPlan;
      }
      break;
    }
  }
});

内容的提问来源于stack exchange，提问作者CodeForGood