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

JavaScript の代わりに CSS セレクターを使用します。

CSS フォーカス セレクター。

于 2013-05-09T18:51:38.310 に答える
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 に答える
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()と、 where I written を使用できます.parent().find('.div-hilite')。しかし、このようにして、これらの入力 + 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 アプローチでは入力ごとに 2 つのイベント ハンドラーが設定されるのに対し、このコードでは合計 2 つのイベント ハンドラーしか設定されないことに注意してください。これは、メソッドで 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 に答える