Question

首先：我有一个包含多个输入/选择字段的表单。

在每个输入/选择字段等上，我想在实时页面上显示它旁边的那个字段的ID，这样我就不必在构建功能时检查每个元素的ID。显然，这将在生产中被删除，但在预生产中，它将非常方便。

我没有先进的JavaScript - 所以寻求帮助/开始！

我尝试过使用它，但显然我在某个地方出了问题：

function showElementID()
{
    if 
    Array.prototype.forEach.call(document.getElementsByTagName("input"), function(inputs) {
    element = document.createElement("span");
    element.textContent = inputs.id;
    inputs.parentNode.appendChild(element);
});

    Array.prototype.forEach.call(document.getElementsByTagName("select"), function(selects) {
    element = document.createElement("span");
    element.textContent = selects.id;
    selects.parentNode.appendChild(element);
});
}

Answer 1

不需要javascript - 将以下CSS添加到您的页面

*[id]:after {
    display:inline-block;
    position:absolute;
    content:attr(id);
    background:dodgerblue;
    font-size:0.5em;
    padding:2px;
    color:white;
    opacity:0.8;
}

正如所指出的那样，至少输入/ textarea不会起作用 - 但是，如果您的所有textareas和输入都有<label for="id-of-input">...</label>，那么您可以执行以下css

*[for]::after {
    display:inline-block;
    position:absolute;
    content:attr(for);
    background:dodgerblue;
    font-size:0.5em;
    padding:2px;
    color:white;
    opacity:0.8;
}

任何带有id的元素现在都会显示它的ID（不应该影响页面的流动）

Answer 2

快速和肮脏的jQuery版本：

$('input, select, textarea').each(function () {
    $(this).after($('<span/>').text(
     ($(this).attr('id') ? '#' + $(this).attr('id') : '[no id]')
    ));
});

http://jsfiddle.net/q64oLm3L/1/

如何在字段旁放置输入/选择字段的ID（测试目的）？

2 个答案: