在输入字段中按 Enter 时将"display:none"更改为"display:flex"

Question

当我在div中的第一个输入字段单击enter时，我如何将display:none更改为display:flex到我的div?

下面是代码:https://pastebin.com/NA9eJjM5

<div class="checkoutDiv" style=" display:flex;">
<input type="text" name="ean" id="focus" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>
<div class="checkoutDiv" style="display: none;">
<input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>
<div class="checkoutDiv" style="display: none;">
<input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>

<script>
function callback(e){
if (
$(this).index() == $('#checkout div[display="flex"]').length - 1
&&
e.which == 13
) {
$(this).next('div[display="none"]').prop("display", "flex").keypress(callback)
}
}
$('#checkout div[display="none"]').keypress(callback)
</script>

这些Div在<div id="checkout">

编辑:

我把它改成:

function callback(e){
if (
$(this).index() == $('.checkoutDiv').attr('style', 'display: flex').length - 1
&&
e.which == 13
) {
$(this).next('.checkoutDiv').attr('style', 'display: flex').keypress(callback).focus();
}
}
$('.checkoutDiv').keypress(callback)

，但它改变了显示属性为所有下一个div类checkoutDiv..如何使它改变显示下一个div只?

Answer 1

考虑使用Classes来分配样式，而不是使用style属性。这给了你更多的能力来管理和选择脚本中的元素。

的例子:

$(function() {
function callback(e) {
if ($(this).index() == $('#checkout div.flex').is(":last") &&
e.which == 13) {
$("#checkout div.hidden:eq(0)").toggleClass("hidden flex");
$("div.flex").last().find("input:eq(0)").addClass("focus").focus();
}
}
$('#checkout').on("keypress", ".focus", callback);
})

.flex {
display: flex;
}
.hidden {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkout">
<div class="checkoutDiv flex">
<input type="text" name="ean" class="focus" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>
<div class="checkoutDiv hidden">
<input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>
<div class="checkoutDiv hidden">
<input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>
</div>

正如我所提到的，有很多变化。

我更新了IF语句，以使用.is()来确保事件在最后一次输入时发生。

为了确保在需要的时候所有的回调都被使用，我使用了.on()，它可以委托回调。

看到更多:

• https://api.jquery.com/is/
• https://api.jquery.com/on/
• https://api.jquery.com/last-selector/