Change "display:none" to "display:flex" when you press enter in the input field-CodePudding

How can I change display:none to display:flex to my div when I click enter in my first input field in the div?

Here is the code: https://pastebin.com/NA9eJjM5

<div  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>

These Div's are in <div id="checkout">

Edit:

I changed it to:

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)

but it changes the display attribute to all next divs with class checkoutDiv.. How to make it to change the display to next div only?

CodePudding user response：

Consider using Classes to assign your Styles instead of using the style attribute. This gives you more ability to manage and select elements in your script.

Example:

$(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 >
    <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 >
    <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 >
    <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>

As I mentioned, there are lots of changes.

I updated the IF statement to make use of .is() to make sure the event was happening on the last input.

To ensure the that the callback was used for all of them as needed, I used .on() which can delegate the callback.

See More: