Question

我是JavaScript和jQuery的新手。我有一个表单，其中所有必需的字段标签都带有星号（我无法更改HTML），我打算删除它，而是添加一个带有自己类的自定义星号。

我无法删除问号。如果你能提供帮助，那就太棒了。我所需的所有字段标签都显示在以下类中 - ＆＃34; reg-required-field＆＃34;。

以下是其中一个字段和标签的标记。

<div class="reg-field-container">
          <div class="reg-process-row">
              <div class="reg-field-left-column">
                   <label class="reg-required-field" for="ctl00_ContentPlaceHolder1_tbxFirstName">*First name:</label>
              </div>
              <div class="reg-field-right-column">
                   <input name="ctl00$ContentPlaceHolder1$tbxFirstName" maxlength="30" id="ctl00_ContentPlaceHolder1_tbxFirstName" type="text">
              </div>
          </div>
      </div>

我创建的JavaScript -

var myString = document.getElementsByClassName("reg-required-field").textContent;
var newString = myString.slice(1,myString.length);

谢谢！

Answer 1

您可以使用String#charAt(index)方法测试每个.reg-required-field文本内容的第一个字符是否为星号，如果是，则使用text.slice(1)方法删除文本中的第一个字符slice。请注意，document.querySelectorAll('.reg-required-field')的第二个参数默认情况下是被切片的字符串的长度。

如果您需要支持旧浏览器，

document.getElementsByClassName('reg-required-field')可以替换为.custom-asterisk。

修改：我添加了在HTML和CSS中自定义'*'的功能，该功能将自动替换标签文本中的初始var customAsterisk = document.querySelector('.custom-asterisk') // detach the custom asterisk template from the DOM, so you don't see it customAsterisk.parentNode.removeChild(customAsterisk) ;[].forEach.call(document.querySelectorAll('.reg-required-field'), function (e) { var text = e.textContent if (text.charAt(0) === '*') { // remove the '*' e.textContent = text.slice(1) // insert a copy of the .custom-asterisk before the new text e.insertBefore(customAsterisk.cloneNode(true), e.firstChild) } })。我在下面注释了代码;如果您有任何问题，请与我联系。

＆＃13;

.custom-asterisk {
  color: #f00;  
}

＆＃13;

<div class="reg-field-container">
          <div class="reg-process-row">
              <div class="reg-field-left-column">
                   <label class="reg-required-field" for="ctl00_ContentPlaceHolder1_tbxFirstName">*First name:</label>
              </div>
              <div class="reg-field-right-column">
                   <input name="ctl00$ContentPlaceHolder1$tbxFirstName" maxlength="30" id="ctl00_ContentPlaceHolder1_tbxFirstName" type="text">
              </div>
          </div>
      </div>

<!-- Customize me! -->
<span class="custom-asterisk">*</span>

＆＃13;

className

＆＃13;

Answer 2

for返回一个类似于对象的数组，您必须循环才能应用于每个元素。这是因为许多元素具有相同的类。正确的代码可能是（使用var labels = document.getElementsByClassName("reg-required-field"); for(var i = 0; i < labels.length; i++){ var oldString = labels[i].textContent; var newString = oldString.splice(1, oldString.length); labels[i].textContents = newString; // Assign the new string to the element }循环迭代该类的每个元素，并删除第一个字符的代码）

var labels = document.getElementsByClassName("reg-required-field");
for(var i = 0; i < labels.length; i++){       
   labels[i].textContent = labels[i].textContent.splice(1, labels[i].length);
}

您可以通过将多行合并为一行来缩短代码

{{1}}

从标签上切一个星号

2 个答案: