0

jQuery の .next() 関数を使用して次の要素を取得しようとしていますが、取得しているのは .next()class="inputfield"だけです[]。

空のセルをクリックすると、入力要素が表示されます (関数 click_td(td_id)/open_input(inputObj))。

要素を終了すると、テキストを残して消えます (function close_input(inputObj))。

タブを押すと、次の要素 (関数 next_cell(inputObj)) に移動します。

ありがとう、アバ

<script language="javascript" type="text/javascript" src="/_inc/jquery/jquery.js"></script> 
    <style type="text/css">
    .inputfield{        
        display: none;
    }
    </style>
    <table cellspacing="0" cellpadding="2" border="1" width="50%">      
        <tr>
            <td width="15%">Name</td>
            <td width="35%" onclick="click_td(this)" id="1_1"><span id="si1_1" style=""></span><input type="text" onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" size="25" value="" name="name" id="i1_1" class="inputfield"></td>
            <td width="15%">E-mail</td>
            <td width="35%" onclick="click_td(this)" id="1_2"><span id="si1_2"></span><input type="text" onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" size="25" value="" name="email" id="i1_2" class="inputfield"></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td onclick="click_td(this)" id="2_1"><span id="si2_1"></span><input type="text" onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" size="25" value="" name="phone" id="i2_1" class="inputfield"></td>        
            <td>Type:<br>
            </td><td onclick="click_td(this)" id="2_2"><span id="si2_2"></span>
                <select onblur="close_input(this);" onkeydown="if (event.keyCode==13) return false;if (event.keyCode==9) return next_cell(this)" name="article_type" id="i2_2" class="inputfield">
                    <option value=""></option>
                    <option>Buying Guide</option>
                    <option>Announcement</option>
                    <option>Hands-on Review</option>
                </select>
            </td>
        </tr>
    </tbody>
    </table>

    <script LANGUAGE="JavaScript">
    <!--
    function click_td(td_id){
        var inputObj = document.getElementById('i' + td_id.id);
        open_input(inputObj)    
    }

    function open_input(inputObj){
        var spanObj = document.getElementById('s' + inputObj.id)    
        inputObj.style.display = 'block';
        spanObj.style.display = 'none';
        inputObj.focus();
    }

    function close_input(inputObj){
        var spanObj = document.getElementById('s' + inputObj.id)
        switch (inputObj.type){ 
            case 'select':
                spanObj.innerHTML = inputObj.options[inputObj.selectedIndex].value; 
                break;  
            case 'text':    
            default:
                spanObj.innerHTML = inputObj.value; 
                break;       
        }           
        inputObj.style.display = 'none';
        spanObj.style.display = '';
    }

    function next_cell(inputObj){   
        next_inputObj = $(inputObj).next('.inputfield');
                console.log(next_inputObj);
        open_input(next_inputObj)
    }
    </script>
4

2 に答える 2

1

問題を強調するためにフィドルの作業を終了しました

http://jsfiddle.net/k77Ya/6/

var next_inputObj = $(inputObj).next('.inputfield');
console.log(next_inputObj.length);

基本的に、提案したクラスを見つけることができない . next() 演算子に要約されます。これは、.next() 演算子が、その時点であなたがいるクラス「inputField」を持つ次のアイテムを探すためです。もちろん存在しないため、.next() 演算子は常に空の配列。

余談ですが、あなたが投稿した HTML には開始タグがありませんが、それは問題ではありません。いくつかの .parent() 演算子を連鎖させると、正しいレベルを取得してそこから移動できます。

var next_inputObj = $(inputObj).parent().next('.inputfield');

編集：今はほとんどあります。上部の 2 つのボックスと下部の 2 つのボックスの間をタブで移動できます。リストの最後の要素に到達したときに次の要素に移動するには、追加のコードが必要です。

問題の 1 つは、タブを押すとぼかしイベントが発生し、ページの入力間でタブを押す機能に影響を与えることでした。以下のように、イベントで preventDefault() メソッドを呼び出して、この機能を防止することをお勧めします。これを実装するために、入力でコードを複製するときにjQuery イベント ハンドラーを使用しました。

event.preventDefault();

これで実用的なソリューションが提供されるはずです。

于 2013-07-02T14:52:32.890 に答える
0

nextAll()を使用します。

デモ

function open_input(inputObj){
    if(!$(inputObj).length) return;
    var spanObj = document.getElementById('s' + inputObj.id)    
    inputObj.style.display = 'block';
    spanObj.style.display = 'none';
    inputObj.click();
    setTimeout(function(){inputObj.focus()},0);
}

function next_cell(inputObj){   
    console.log(inputObj);
    var next_inputObj = $(inputObj).closest('td').nextAll('td').find('.inputfield')[0];
    open_input(next_inputObj)

}
于 2013-07-02T14:23:10.673 に答える