我有一些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是要走的路?...?
什么时候该“选择”发生?当复选框被选中/取消选中时? – 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