javascript - 声明一个可以隐藏调用 HTML 元素标签的 JavaScript 函数

Question

HTML

<label for="ABC">LABEL1</label><input type="text" id="ABC" onFocus="label();"/>
<label for="DEF">LABEL2</label><input type="text" id="DEF" onFocus="label();"/>

JavaScript

我想声明一个名为“label”的 JS 函数，它可以找到调用它的元素的标签并将其隐藏。

问题解决了！谢谢大家的支持！:D

Answer 1

这隐藏label了相应的input.

function focus() {
    var labels = document.getElementsByTagName('label');
    for(var i = 0; i < labels.length; i ++) {
        var attr = labels[i].getAttribute('for'); //or labels[i].htmlFor
        if(attr === this.id) {
            labels[i].style.visibility = 'hidden';
            //or labels[i].style.display = 'none';
        }
    }

}

document.getElementById('ABC').addEventListener('focus', focus);
document.getElementById('DEF').addEventListener('focus', focus);

JSFiddle

一个jQuery解决方案：

$('input').on('focus', function() {
    $('label[for=' + this.id + ']').hide();  
});

Answer 2

+cPu1 jQuery 解决方案可以用现代浏览器（IE >=9）的标准 JS 编写如下

<label for="ABC">LABEL1</label><input type="text" id="ABC" onFocus="label(this);"/>
<label for="DEF">LABEL2</label><input type="text" id="DEF" onFocus="label(this);"/>

function label (el) {
  (el = document.querySelector ('label[for=" + el.id + '"]')) && 
    (el.style.display = 'none');
}

请注意，我们需要将input元素作为参数传递给标签函数。

http://jsfiddle.net/jstoolsmith/v5kZb/上的小提琴显示了一种更结构化的方法，并且在输入元素失去焦点时也替换了标签。

Answer 3

这是一个有点晚的解决方案，仅适用于更新/现代浏览器（基本上，不适用于版本 8 之前的 Internet Explorer）。该解决方案实现了显示切换（在焦点label时隐藏，在模糊input时恢复）：input

版本一，利用 DOM 结构：

// gets the first 'form' element:
var parentElement = document.querySelector('form');

function labelToggle (e) {
    // gets the target of the event ('e'),
    // the element that was focused or blurred:
    var self = e.target;
    // if the element has an 'id':
    if (self.id) {
        // get the previous sibling element
        var prev = self.previousElementSibling;
        // if it's 'display: none', change display to 'inline',
        // otherwise change to 'display: none':
        prev.style.display = prev.style.display == 'none' ? 'inline' : 'none';
    }
}

/* using event-delegation to avoid event-binding with a loop,
   using event-capturing to allow for an ancestor to listen for
   the 'non-bubbling' 'focus' and 'blur' events:
*/
parentElement.addEventListener('focus', labelToggle, true);
parentElement.addEventListener('blur', labelToggle, true);

JS 小提琴演示。

版本二，使用for属性（而不是 DOM 结构）：

// gets the first 'form' element:
var parentElement = document.querySelector('form');

function labelToggle (e) {
    // gets the target of the event ('e'),
    // the element that was focused or blurred:
    var self = e.target;
    // if the element has an 'id':
    if (self.id) {
        // get the label with the relevant 'for' attribute,
        // using CSS' attribute-equals notation:
        var label = this.querySelector('label[for="' + self.id + '"]');
        // if it's 'display: none', change display to 'inline',
        // otherwise change to 'display: none':
        label.style.display = label.style.display == 'none' ? 'inline' : 'none';
    }
}

parentElement.addEventListener('focus', labelToggle, true);
parentElement.addEventListener('blur', labelToggle, true);

JS 小提琴演示。

显然，您可以使用您喜欢的任何名称调用相关函数，我称它们为“labelToggle”只是因为我更喜欢函数名称来指示该函数在调用时的作用。

参考：

• document.querySelector().
• document.querySelectorAll()兼容性。
• element.addEventListener().
• elementTraversal.previousElementSibling.

Answer 4

你的问题不清楚，你想隐藏什么，标签或文本框？但是，这是一个想法；它可能会帮助你。

<label for="ABC">LABEL1</label><input type="text" id="ABC" onFocus="label(this.id);"/>
<label for="DEF">LABEL2</label><input type="text" id="DEF" onFocus="label(this.id);"/>

function label(valID){
    var totalLabel= document.getElementsByTagName('label');
    for(var l = 0; l < totalLabel.length; l++) {
        var lbb= totalLabel[l].getAttribute('for');
        if(lbb === valID) {
            labels[l].style.visibility = 'hidden';
        }
    }
}

Answer 5

Jquery 最适合这个。演示在这里

function hideLabel(element) {
        var name = $(element).attr("class");
        var lab = $("." + name)[0];
        $(lab).hide();

    }

    function showLabel(element) {
        var name = $(element).attr("class");
        var lab = $("." + name)[0];
        $(lab).show();
    }

HTML

 <label class="a">
    Label1</label>
<input type="text" class="a" id="ABC" onfocus="hideLabel(this)" onblur="showLabel(this)" />
<label class="b">
    Label2</label>
<input type="text" class="b" id="DEF" onfocus="hideLabel(this)" onblur="showLabel(this)" />