當我在 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 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 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？
uj5u.com熱心網友回復：
考慮使用類來分配您的樣式，而不是使用樣式屬性。這使您能夠更好地管理和選擇腳本中的元素。
例子：
$(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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497873.html
標籤：jQuery