更好的方式來實現這個香草JavaScript DOM遍歷？

我有一些Marketo自動生成的表單，這意味着我被迫解決所提供的內容。當只有一個值的複選框時，我需要向父標籤添加一個類（有一條評論指出哪一個）。更好的方式來實現這個香草JavaScript DOM遍歷？

問題中的複選框可能是任何字段，而不僅僅是特定的「explicitOptin」，所以我無法基於此選擇（至少不是初始的）。我還必須確保我不會意外地選擇具有兩個或更多值的複選框。

這裏是我想出的JavaScript：

var ckBox = document.querySelector('.mktoCheckboxList .mktoField:only-of-type').parentNode.previousSibling.previousSibling; 
if (ckBox.className.indexOf('mktoSingleCheckbox') == -1) { 
    ckBox.className += ' mktoSingleCheckbox'; 
}

<form id="mktoForm_1690" novalidate="novalidate" class="mktoForm mkt*emphasized text*oHasWidth mktoLayoutLeft" data-styles-ready="true"> 
<div class="mktoFormRow"> 
    <div class="mktoFormRow"> 
     <div class="mktoFieldDescriptor mktoFormCol"> 
      <div class="mktoOffset"></div> 
      <div class="mktoFieldWrap"> 
       <label for="hazmatchooseallthatapply" class="mktoLabel mktoHasWidth"> 
        <div class="mktoAsterix">*</div>Hazmat (choose all that apply):</label> 
       <div class="mktoGutter mktoHasWidth"></div> 
       <div class="mktoLogicalField mktoCheckboxList mktoHasWidth"> 
        <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_0" type="checkbox" value="Hazardous Materials" class="mktoField"> 
        <label for="mktoCheckbox_9480_0">Hazardous Materials</label> 
        <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_1" type="checkbox" value="Hazardous Waste" class="mktoField"> 
        <label for="mktoCheckbox_9480_1">Hazardous Waste</label> 
        <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_2" type="checkbox" value="Fuel Tanker" class="mktoField"> 
        <label for="mktoCheckbox_9480_2">Fuel Tanker</label> 
       </div> 
       <div class="mktoClear"></div> 
      </div> 
      <div class="mktoClear"></div> 
     </div> 
     <div class="mktoClear"></div> 
    </div> 
    <div class="mktoClear"></div> 
</div> 
<div class="mktoFormRow"> 
    <div class="mktoFieldDescriptor mktoFormCol"> 
     <div class="mktoOffset"></div> 
     <div class="mktoFieldWrap"> 
      <!--This label directly below is the element that needs the new class--> 
      <label for="explicitOptin" class="mktoLabel mktoHasWidth mktoSingleCheckbox"> 
       <div class="mktoAsterix">*</div>Yes, please sign me up to receive information from PrePass by email.</label> 
      <div class="mktoGutter mktoHasWidth"></div> 
      <div class="mktoLogicalField mktoCheckboxList mktoHasWidth mktoValid"> 
       <!-- This is the single checkbox input that I am selecting with my javascript --> 
       <input name="explicitOptin" id="explicitOptin" type="checkbox" value="yes" class="mktoField"> 
       <label for="explicitOptin"></label> 
      </div> 
      <div class="mktoClear"></div> 
     </div> 
     <div class="mktoClear"></div> 
    </div> 
    <div class="mktoClear"></div> 
</div>

我覺得必須有不僅僅是串在一起parentNode和previousSibling方法更好的方法。

有什麼建議嗎？我在想一個可能的選擇是使用我正在使用的CSS選擇器，但是然後獲取ID值和具有該ID值的搜索元素。也許只是一起串起parentNode和previousSiblings是要走的路？...？

來源

2017-09-01 AZRckCrwler

什麼時候該「選擇」發生？當複選框被選中/取消選中時？ – Teemu

此選擇發生在表單加載上，因爲添加的類將標籤放置到我需要的位置。在這種情況下選擇並不重要。一個工作示例可以在這裏找到：http：//go.prepass.com/PP-Application-Dana_Dana-Test-Page.html。基本上，該類只是將標籤移動到複選框的右側。 – AZRckCrwler

立即你可以做的一件事就是使用'ckBox.classList.add（'mktoSingleCheckbox'）'而不是整個'if'語句。有關['.classList']（https://developer.mozilla.org/en-US/docs/Web/API/Element/classList）的更多信息。 – ContinuousLoad

寫這篇文章，您的解決方案似乎是最好的路線走，用element.classList代替element.className除外。

可選reformating導致了這種（長期）的一行：

document.querySelector('.mktoCheckboxList .mktoField:only-of-type') 
    .parentNode.previousSibling.previousSibling 
    .classList.add('mktoSingleCheckbox');

展望未來，瀏覽器將讓我們用HTMLInputElement.labels API收集與<input>相關的標籤。

#                 WOW! 
document.querySelector('.mktoCheckboxList .mktoField:only-of-type').labels[0] 
    .classList.add('mktoSingleCheckbox');

不幸的是，這個API瀏覽器支持非常正確的，現在的限制，並試圖獲得相關的標籤手工也許是更加麻煩比當前的方法。

希望這會有所幫助！

來源

2017-09-05 02:34:15 ContinuousLoad

更好的方式來實現這個香草JavaScript DOM遍歷？

回答

相關問題