Question

我使用下面的脚本来使用占位符，但是当我添加单选按钮时，脚本会中断。缺少什么？

var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
  var label = labels.item(i);
  var text = label.textContent;
  label.parentNode.classList.contains("required") && (text += " *");
  var nextElement = label.nextElementSibling;

  if (nextElement.tagName == 'SELECT') {
    nextElement.options[0].text = text;
   } else {
    nextElement.setAttribute("placeholder", text);
   }
  label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
  el.parentNode.removeChild(el);
});

这是jsfiddle：https://jsfiddle.net/katyhege/zdqLtmsn/

Answer 1

似乎当脚本中断时，它会显示nextElement undefined，因此您可以检查此内容。如果适合您，请尝试一次，

var labels = document.querySelectorAll("label");
    var i = labels.length;
    while (i--) {
    var label = labels.item(i);
    var text = label.textContent;
    label.parentNode.classList.contains("required") && (text += " *");
    var nextElement = label.nextElementSibling;

      // This is what I changed:
     if(nextElement){
       if (nextElement.tagName == 'SELECT') {
        nextElement.options[0].text = text;
       } else {
        nextElement.setAttribute("placeholder", text);
       }
     label.parentNode.removeChild(label);
     }
  }
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
el.parentNode.removeChild(el);
});

或者你可以再做一个解决方案，只需替换

var i = labels.length;

带

var i = labels.length-2;

此外，您可以通过更改HTML来使其正常工作，这基本上会导致问题，您可以看到最后两个标签（用于单选按钮），您没有将输入（单选按钮）放在标签旁边但是你把它们放在标签之前，所以它找不到那里的下一个兄弟。如果您将标签旁边的无线电输入写入（正如您对其他输入所做的那样），那么它将正常工作。感谢。

祝你好运：）

Answer 2

保留我使用的收音机/复选框字段的标签：

var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");

添加单选按钮

2 个答案: