使用 jQuery 仅寻址文本输入字段

Question

您好，我正在尝试仅处理文本字段，以便我可以仅为那些隐藏标签。我仍然希望复选框和阅读按钮的标签可见。隐藏代码有效，但它隐藏了所有标签。

脚本必须适用于所有情况，无论字段是什么或它们是如何命名的。那么我如何才能让它只解决文本输入字段的标签：

$("label").each(function () {

我好像做不出来。

这是 html 的示例：

<p class="form-field pd-text">
 <label class="field-label" for="229122">E-post</label>
 <input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" />
</p>
<p class="form-field pd-checkbox">
 <label class="field-label" for="229122">Example checkbox</label>
 <span class="value"><span>
  <input type="checkbox" name="229122" id="229122" value="25034" onchange="" />
  <label class="inline" for="229122">false</label>
 </span></span>
</p>

Answer 1

试试这个 $('[type=text]').prev().hide();

如果您在任何情况下将输入前的标签向后或向前移动两级。你可以这样定位

 var labelFor = $('[type=text]').attr('id');
 $("label[for="+labelFor+"]").hide()

Answer 2

试试这个。

$("input[type='text']").prev('label').hide();

<p class="form-field pd-text">
 <label class="field-label" for="229122">E-post</label>
 <input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" />
</p>
<p class="form-field pd-checkbox">
 <label class="field-label" for="229122">Example checkbox</label>
 <span class="value"><span>
  <input type="checkbox" name="229122" id="229122" value="25034" onchange="" />
  <label class="inline" for="229122">false</label>
 </span></span>
</p><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Answer 3

您可以使用.map根据其for=属性找到匹配的标签：

var labels = $("input[type='text']").map(function() {
    return $("label[for=" + this.id + "]").toArray()
})
labels.hide();

示例 fiddle：https://jsfiddle.net/rdtt8toe/

注意这要求 id= 是唯一的，它必须是唯一的（并且在 fiddle 中）但是 not 在你的代码中。因此，对于您的 html，所有标签都将被找到，因为复选框与文本框具有相同的 ID。

或者，您可以对 DOM 层次结构进行假设。例如：

$("input[type='text']").parent().find("label")

查找同一容器中的所有标签。这将找到前面和后面的两个元素，并且中间可以有其他元素（不像 .prev!）

在你的情况下，你可能更愿意去最近的 .form-field:

$("input[type='text']").closest(`.form-field`).find("label")

Answer 4

您可以为文本输入标签提供自定义 class

<p class="form-field pd-text">
    <label class="field-label text-label" for="229122">E-post</label>
    <input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" />
</p>
<p class="form-field pd-checkbox">
    <label class="field-label" for="229122">Example checkbox</label>
    <span class="value"><span>
        <input type="checkbox" name="229122" id="229122" value="25034" onchange="" />
        <label class="inline" for="229122">false</label>
    </span></span>
</p>

然后只隐藏那些标签

$(".text-label").hide()

如果您想隐藏所有 表单字段 将自定义 class 分配给该字段

即：

<p class="form-field pd-text text-label">
    <label class="field-label" for="229122">E-post</label>
    <input type="text" name="229122" id="229122" value="" class="text" size="30" maxlength="255" />
</p>

使用 jQuery 仅寻址文本输入字段

Addressing only text input fields with jQuery

jquery

labels