0

我正在尝试使用 jQuery 的 .next() 函数来获取下一个元素，class="inputfield"但我得到的只是[].

如果单击空单元格，则会显示输入元素（函数 click_td(td_id)/open_input(inputObj)）。

退出元素时，它会消失，留下文本（函数 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');

编辑：现在差不多了；您可以在顶部的两个框和底部的两个框之间切换。当您到达列表中的最后一个元素时，它需要一些额外的代码才能导航到下一个元素。

其中一个问题是按下 Tab 会触发一个模糊事件，这会影响在页面上的输入之间切换的能力。我建议通过在事件上调用 preventDefault() 方法来阻止此功能，如下所示。为了实现这一点，当您在输入中复制代码时，我使用了 jQuery 事件处理程序 - 可在此处找到文档：http: //api.jquery.com/blur/和http://api.jquery.com/keydown/

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 回答