我需要做一个jQuery脚本来反映我在一个输入<input>
的class="a"
下一个前进<input>
的class="b"
,在按下键盘每个键。
但我有一些限制:
.on()
因为div
包含输入的是dinamically创建的。我已经尝试使用.next()
,.find()
,.each()
,.closest()
...但我是一个初学者,所以我不知道如何正确地使用它们。可能是使用这些功能的东西。
<!-- any code -->
<div>
<input type="text" class="a" />
</div>
<!-- any code -->
<div>
<input type="text" class="b" />
</div>
<!-- any code -->
<div>
<input type="text" class="a" />
</div>
<!-- any code -->
<div>
<input type="text" class="b" />
</div>
<!-- any code -->
<div>
<input type="text" class="a" />
</div>
<!-- any code -->
<div>
<input type="text" class="b" />
</div>
<!-- any code -->
$(document).on('keyup', '.a', function (ev) {
//1 - get value in input and store in a variable
//2 - search for the next forward input of class="b"
//3 - set the variable to the value of input
});
重要提示:请注意,代码不完全是这样的。在一个input
和另一个之间,有一些代码,并且它们不是同一父代中的事件div
。我唯一不能保证的是,接下来input
是在代码中的蚂蚁,它将在一个内部div
。
发布于 2019-05-27 11:06:37
[1]要参考您输入的输入,您需要使用$(this)
[2]以获得其价值.val()
[3]选择.b
您需要使用的下一个元素.next('.b')
$(this).next('.b').val($(this).val())
而我更喜欢使用input
event而不是keyup
$(document).on('input', '.a', function (ev) {
//1 - get value in input and store in a variable
var GetThisValue = $(this).val();
//2 - search for the next forward input of class="b"
//3 - set the variable to the value of input
$(this).next('.b').val(GetThisValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" class="a" />
<input type="text" class="b" />
</div>
<div>
<input type="text" class="a" />
<input type="text" class="b" />
</div>
<div>
<input type="text" class="a" />
<input type="text" class="b" />
</div>
[选择其他选择器.b
]
$(this).parent().find('.b')
$(this).closest('div').find('.b')
Snippet到OP更新
$(document).on('input', '.a', function (ev) {
//1 - get value in input and store in a variable
var GetThisValue = $(this).val();
//2 - search for the next forward input of class="b"
//3 - set the variable to the value of input
$(this).parent().nextAll('div:has(.b):first').find('.b').val(GetThisValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" class="a" />
</div>
<div> any code </div>
<div>
<input type="text" class="b" />
</div>
<!-- any code -->
<div>
<input type="text" class="a" />
</div>
<div> any code </div>
<div>
<input type="text" class="b" />
</div>
<div> any code </div>
<div>
<input type="text" class="a" />
</div>
<!-- any code -->
<div>
<input type="text" class="b" />
</div>
<!-- any code -->
https://stackoverflow.com/questions/-100009057
复制相似问题