Question

我正在尝试做什么

当用户按回车键时，我希望关注那些输入元素，其中数据索引属性值介于0-2之间，还有类型是文本，并使用switch语句检查其属性值以执行特定操作。

以下是我的设计代码：

<div id="formelements" class="panel-body">
  <div class="form-group">
    <label for="pwd" >Name:</label>
    <input type="text" class="form-control" data-index="0">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="text" class="form-control" data-index="1">
  </div>
  <div class="form-group">
    <label for="pwd">Phone:</label>
    <input type="text" class="form-control" data-index="2">
  </div>
</div>

以下是我正在尝试的jquery代码：

$('#formelements').on('keydown', 'input', function (e) {
        e.preventDefault();
        if (e.which == 13) {
            $('input[type=text]').each(function () {
                switch ($(this).attr('data-index')) {
                    case '0':
                        $(this).focus();
                        break;

                    case '1':
                        $(this).focus();
                        break;
                    case '2':
                        $(this).focus();
                        break;
                }
            });
        }
    });

Answer 1

这不起作用，而不是使用找到值索引为零的数据索引并定位元素...在你的代码中，对此的引用将丢失。

$(document).ready(function(){
    // cannot use .children() because the <dt> are not direct children
    $('#formelements').find('.form-control').each(function() {
        alert("what ever u want to target");
        //and ur code 
    });
})

Answer 2

您当前的实现总是将焦点放在最后一个输入字段上，因为您遍历每个输入字段，然后将焦点设置在具有data-attr的字段上。

如果要在单击enter后关注下一个输入，则只需要使用data-index ++定位下一个出现的元素。

 <div id="formelements" class="panel-body">
  <div class="form-group">
    <label for="pwd" >ENTER WOULD NOT WORK ON THIS FIELD:</label>
    <input type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="pwd" >Name:</label>
    <input type="text" class="form-control" data-index="0">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="text" class="form-control" data-index="1">
  </div>
        <div class="form-group">
    <label for="pwd" >ENTER WOULD SKIP THIS FIELD:</label>
    <input type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="pwd">Phone:</label>
    <input type="text" class="form-control" data-index="2">
  </div>
</div>

    $('#formelements').on('keydown', 'input', function (e) {          
        if (e.which == 13 && $(this).attr("data-index")) 
        {   
            var cur = $(this).attr("data-index");
            $('input[data-index]').each(function ()
            {
                var ele = $(this).attr("data-index");
                if(ele == cur)
                {
                    ele++;               
                    $("input[data-index='" + ele + "']").focus();
                    return false;
                }
            });        
           e.preventDefault();
        }
    });

http://jsfiddle.net/742r7t6f/1/

Jquery使用switch语句

2 个答案: