1

我需要你的帮助，

正如您在下面看到的，我最终将获得大量代码来完成 div 和输入字段的 onblur 和 on focus 场景。有没有办法创建一个“列表”并循环遍历它以逐行完成这段代码的工作？由于我将有超过 20 个字段，因此代码页会很长。

document.getElementById('f1').onfocus = function() {
    document.getElementById('f1').style.border = '1px solid #0033CC'
    document.getElementById('div_rssims_prefix').style.color = '#0033CC'    
}
document.getElementById('f1').onblur = function() {
    document.getElementById('f1').style.border = '1px solid #ABADB3'
    document.getElementById('div_rssims_prefix').style.color = ''   
}
document.getElementById('f2').onfocus = function() {
    document.getElementById('f2').style.border = '1px solid #0033CC'
    document.getElementById('div_rssims_firstname').style.color = '#0033CC' 
}
document.getElementById('f2').onblur = function() {
    document.getElementById('f2').style.border = '1px solid #ABADB3'
    document.getElementById('div_rssims_firstname').style.color = ''    
}
document.getElementById('f3').onfocus = function() {
    document.getElementById('f3').style.border = '1px solid #0033CC'
    document.getElementById('div_rssims_middlename').style.color = '#0033CC'    
}
document.getElementById('f3').onblur = function() {
    document.getElementById('f3').style.border = '1px solid #ABADB3'
    document.getElementById('div_rssims_middlename').style.color = ''   
}

一个理想的清单是：

f1,div_rssims_prefix
f2,div_rssims_firstname
f3,div_rssims_middlename

等等。

4

4 回答 4

4

使用 CSS 选择器而不是 Javascript。

CSS 焦点选择器。

于 2013-05-09T18:51:38.310 回答
0

如果您真的希望代码像现在一样运行，使用您拥有的确切 DOM 结构，您可以这样做：

setupFocusBlurList([
    'f1,div_rssims_prefix',
    'f2,div_rssims_firstname',
    'f3,div_rssims_middlename'
]);

function setupFocusBlurList( elements ) {
    for( var i = 0;  i < elements.length;  i++ ) {
        var ee = elements[i].split(),
            input = document.getElementById( ee[0] ),
            div = document.getElementById( ee[1] );
        setupFocusBlur( input, div );
    }
}

function setupFocusBlur( input, div ) {
    input.onfocus = function() {
        input.style.border = '1px solid #0033CC';
        div.style.color = '#0033CC';
    };
    input.onblur = function() {
        input.style.border = '1px solid #ABADB3';
        div.style.color = '';
    };
}

也就是说，还有其他方法可以使这更容易一些。您可以控制 HTML 代码的结构吗？你能用jQuery吗？根据 HTML 的结构，您可以大大简化此代码 - 如果您可以使用 jQuery，甚至更多。

这是我的意思的一个例子。如果您可以编写类似这样的 HTML 代码：

<div id="input-list">

    <div>
        <input id="f1" class="input-hilite">
        <div class="div-hilite" id="div_rssims_prefix"></div>
    </div>

    <div>
        <input id="f2" class="input-hilite">
        <div class="div-hilite" id="div_rssims_firstname"></div>
    </div>

    <div>
        <input id="f3" class="input-hilite">
        <div class="div-hilite" id="div_rssims_middlename"></div>
    </div>

</div>

那么你可以使用这个 jQuery 代码：

setupFocusBlurList( '#input-list' );

function setupFocusBlurList( wrapper ) {
    setupStyle( 'focus', '1px solid #0033CC', '#0033CC' );
    setupStyle( 'blur', '1px solid #ABADB3', '' );

    function setupStyle( event, inputBorder, divStyle ) {
        $(wrapper).on( event, '.input-hilite', function() {
            $(this).css( 'border', inputBorder )
                .parent().find('.div-hilite')
                    .css( 'color', divColor );
        });
    }
}

您甚至可以使该代码更简单一些 - 使用我上面列出的特定 HTML，您可以使用.next()我编写.parent().find('.div-hilite')的 . 但是这种方式允许这些 input+div 块的结构有更多变化。

或者，如果您的 HTML 看起来更像Xotic750 回答中的示例：

<div id="container">
    <div id="div_rssims_prefix">Prefix
        <input id="f1" type="text" value="Prefix">
    </div>
    <div id="div_rssims_firstname">First Name
        <input id="f2" type="text" value="First Name">
    </div>
    <div id="div_rssims_middlename">Middle Name
        <input id="f3" type="text" value="Middle Name">
    </div>
</div>

然后您可以简单地保留.parent()并删除.find('.div-hilite')，并使用不同的选择器来获取input元素：

setupFocusBlurList( '#container' );

function setupFocusBlurList( wrapper ) {
    setupStyle( 'focus', '1px solid #0033CC', '#0033CC' );
    setupStyle( 'blur', '1px solid #ABADB3', '' );

    function setupStyle( event, inputBorder, divStyle ) {
        $(wrapper).on( event, 'input', function() {
            $(this).css( 'border', inputBorder )
                .parent().css( 'color', divColor );
        });
    }
}

无论哪种方式，值得注意的是，这段代码总共只设置了两个事件处理程序，而使用纯 JavaScript 方法的每个输入都设置了两个。那是因为它在方法中使用了 jQuery 的事件委托.on()。所以效率很高。并不是说只有 20 个左右的输入字段很重要，但是如果您有一张大表，那将有很大的不同。

于 2013-05-09T19:09:16.887 回答
0

您可以使用 JavaScript 对象来映射字段，然后循环通过该对象来分配事件。

工作示例：http: //jsfiddle.net/jZCQV/1/

var objFocusPairs = {
    "f1": "div_rssims_prefix",
    "f2": "div_rssims_firstname",
    "f3": "div_rssims_middlename"
}

for (var curID in objFocusPairs) {
    document.getElementById(curID).onfocus = function(strID){
        return function(){focusStyle(strID)};
    }(curID);
    document.getElementById(curID).onblur = function(strID){
        return function(){blurStyle(strID)};
    }(curID);
}

function focusStyle(strID) {
    document.getElementById(strID).style.backgroundColor = 'aliceblue';
    document.getElementById(objFocusPairs[strID]).style.color = 'mediumblue';
}

function blurStyle(strID) {
    document.getElementById(strID).style.backgroundColor = '';
    document.getElementById(objFocusPairs[strID]).style.color = '';
}
于 2013-05-09T19:36:08.393 回答
0

像这样的事情怎么样，你真的需要在脚本中保留一个数组/ID列表吗？这应该适用于 IE7，但我没有它可以测试。

HTML

<div id="container">
    <div id="div_rssims_prefix">Prefix
        <input id="f1" type="text" value="Prefix"></input>
    </div>
    <div id="div_rssims_firstname">First Name
        <input id="f2" type="text" value="First Name"></input>
    </div>
    <div id="div_rssims_middlename">Middle Name
        <input id="f3" type="text" value="Middle Name"></input>
    </div>
</div>

Javascript

var container = document.getElementById("container"),
    length1 = container.childNodes.length,
    i = 0,
    node1,
    length2,
    node2,
    j;

while (i < length1) {
    node1 = container.childNodes[i];
    if (node1 && node1.nodeType === 1 && /^div_rssims_\S+$/.test(node1.id)) {
        length2 = node1.childNodes.length;
        j = 0;
        while (j < length1) {
            node2 = node1.childNodes[j];
            if (node2 && node2.nodeType === 1 && /^f\d+$/.test(node2.id)) {
                node2.onfocus = function () {
                    this.style.border = 'solid 1px #0033CC';
                    this.parentNode.style.color = '#0033CC'
                }

                node2.onblur = function () {
                    this.style.border = 'solid 1px #ABADB3';
                    this.parentNode.style.color = ''
                }
            }

            j += 1;
        }
    }

    i += 1;
}

在jsfiddle 上

或者也许像这样更通用一点？我仍然将此代码基于猜测的 HTML。

Javascript

function getElementsById(node, regex) {
    var nodeList = arguments[2] || [];

    if (node.nodeType === 1) {
        if (regex.test(node.id)) {
            nodeList.push(node);
        }

        node = node.firstChild;
        while (node) {
            getElementsById(node, regex, nodeList);
            node = node.nextSibling;
        }
    }

    return nodeList;
}

var inputs = getElementsById(document.getElementById("container"), /^f\d+$/),
    length = inputs.length,
    i = 0,
    node;

while (i < length) {
    node = inputs[i];

    node.onfocus = function () {
        this.style.border = 'solid 1px #0033CC';
        this.parentNode.style.color = '#0033CC'
    }

    node.onblur = function () {
        this.style.border = 'solid 1px #ABADB3';
        this.parentNode.style.color = ''
    }

    i += 1;
}

在jsfiddle 上

或者也许你可以控制你的标记并且可以做这样的事情

CSS

label {
    float: left;
    margin-right: 5px;
}
input {
    display: block;
}

HTML

<div id="container">
    <label for="f1">Prefix</label>
    <input id="f1" type="text" value="Enter value"></input>
    <label for="f2">First Name</label>
    <input id="f2" type="text" value="Enter value"></input>
    <label for="f2">Middle Name</label>
    <input id="f3" type="text" value="Enter value"></input>
</div>

Javascript

function getElementsById(node, regex) {
    var nodeList = arguments[2] || [];

    if (node.nodeType === 1) {
        if (regex.test(node.id)) {
            nodeList.push(node);
        }

        node = node.firstChild;
        while (node) {
            getElementsById(node, regex, nodeList);
            node = node.nextSibling;
        }
    }

    return nodeList;
}

function getPreviousSibling(element) {
    var p = element;

    do {
        p = p.previousSibling;
    } while (p && p.nodeType !== 1);

    return p;
}

var inputs = getElementsById(document.getElementById("container"), /^f\d+$/),
    length = inputs.length,
    i = 0,
    node;

while (i < length) {
    node = inputs[i];

    node.onfocus = function () {
        if (this.value === "Enter value") {
            this.value = "";
        }

        this.style.border = 'solid 1px #0033CC';
        getPreviousSibling(this).style.color = '#0033CC'
    }

    node.onblur = function () {
        if (this.value === "") {
            this.value = "Enter value";
        }

        this.style.border = 'solid 1px #ABADB3';
        getPreviousSibling(this).style.color = ''
    }

    i += 1;
}

在jsfiddle 上

于 2013-05-09T20:29:07.213 回答