使用数组值缩短庞大的列表

Question

我需要你的帮助，

正如您在下面所看到的，我将最终拥有一个巨大的代码列表来完成onblur以及div和输入字段的焦点场景。有没有办法创建一个“列表”并循环它以完成这个代码逐行的功能？由于我将拥有超过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

等。

Answer 1

使用CSS选择器而不是Javascript。

CSS Focus selector

Answer 2

如果您真的希望代码像现在一样运行，使用您拥有的精确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')。但是这样它允许那些输入+ div块的结构有更多的变化。

或者，如果您的HTML看起来更像Xotic750's answer中的示例：

<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个左右的输入字段并不重要，但如果你有一个大表，那将会产生很大的不同。

Answer 3

您可以使用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 = '';
}

Answer 4

这样的事情怎么样，你真的需要在脚本中保留一个数组/列表吗？这应该适用于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

上