2

この html シナリオがあるとしましょう:

ご注意ください：

フォームの「action」属性と「method」属性は意図的に省略されています。私の実際のプロジェクトでは、同様のシナリオがあり、これらすべてのフィールドの周りにフォームがあると、リクエストの処理に役立つ可能性があるため、「フォーム」タグはここにあります。

<form id="form1">
    <div id="wrapperDiv">
        <div id="div1">
            <input type="text" id="searchField"/>
        </div>
        <div id="div2">
            <ul>
                <li><a href="javascript:void(0)" onclick="callFunction(this);">Hello</a></li>
            </ul>
        </div>
    </div>
</form>

<script type="text/javascript">
    function callFunction(x)
    {
         //When invoked this function sets the value of "searchField" to the respective link tag innerHTML
         //to set this you cant use something like:
         // var y = document.getElementById("searchField");
    }
</script>
4

5 に答える 5

1

div に入力要素が 1 つしかないことが確実な場合:

var parent = document.getElementById('div1');
var element = parent.GetElementsByTagName('input')[0];
于 2012-12-27T10:09:19.570 に答える
0

var y= document.getElementsByTagName("input"); を使用できます。

于 2012-12-27T10:28:40.993 に答える
0

1 つの可能性は次のとおりです。

function findIndex(el, container) {
    // we can't do anything without a node to work on
    if (!el) {
        return false;
    }
    else {
        // container must be a node, if no container is supplied the body is used
        container = container || document.body;
        // finds all elements of the same tagName as the node
        // (el) passed to the function that are within the container node
        var els = container.getElementsByTagName(el.tagName);
        // iterates through each of these nodes
        for (var i = 0, len = els.length; i < len; i++) {
            // sets the 'data-index' attribute to be equal to 'i'
            els[i].setAttribute('data-index', i);
        }
        // returns the generated index from the 'el' node passed into the function
        return el.getAttribute('data-index');
    }
}

function callFunction(el) {
    // if no el passed in, we stop here
    if (!el) {
        return false;
    }
    else {
        // sets the 'i' variable equal to the value of the 'data-index' attribute
        // if it exists, if it doesn't then we generate it
        var i = el.dataIndex ? el.getAttribute('data-index') : findIndex(el, document.forms.form1);
        // if an index is found (the 'i' variable) we set the value of
        // the 'input' with that index to be equal to the text contained
        // within the clicked link
        if (i) {
            document.getElementsByTagName('input')[i].value = (el.textContent || el.innerText);
        }
        // if no index is returned then we exit here
        else {
            return false;
        }
    }
}

var links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function(e) {
        e.preventDefault();
        callFunction(this);
    }
}​

JS フィドルのデモ。

これは、 n 番目の要素と n番目の要素の 間に直接的な関係があることを前提としています。input a

また、メンテナンスを少し簡単にするために (そして JavaScript の邪魔にならないようにするために)、インライン イベント ハンドラーの使用をやめました。への最初の呼び出しでcallFunction()すべてのa要素が与えられ (親/祖先を指定してa、特定の祖先ノード/要素内の要素のみにインデックス付けを制限できます)、後続の呼び出しではdata-index(インデックスを再生成するのではなく) 生成された属性を使用します。 .

参考文献:

于 2012-12-27T10:53:28.670 に答える