Question

我用jQuery开始冒险，在练习中我遇到了一个我不知道如何处理的障碍。我必须编写一个代码，当您输入一个数字时，该代码将显示为用户输入的次数。仅接受数字的输入字段（必须另外验证代码）。最低1，最多100 如果不是数字或超出范围，我们通知用户用户输入一个数字并单击一个按钮，程序会根据用户输入的次数显示上述用户更重要的是（不必完美）5张图片插入新行（
）。我将不胜感激任何帮助...

＆＃13;

<script>
$(document).ready(function () {

  $('#display').hide();
  $('#danger').hide();

  var src = $('#image').val();
  var number = $('#number').val();

  function showInput() {
      var index = 1;
      for (var index = 0; index < number; index++) {
        document.getElementById('#display').innerHTML =
          document.getElementById("#number").value;
      }
  }
  
  $("#submit").click(function () {
    if (number == "") {
      //Check if number is numeric
      $('#danger').html('Prosimy o wpisanie właściwej wartości').show();
      $("#number").attr("style", "border-color: red!important");
      return false;
      
    } else if (number < 1 || number > 100) {
      $('#danger').html('Prosimy o wpisanie właściwej wartości').show();
      $("#number").attr("style", "border-color: red!important");
      return false;
      
    } else {
      showInput()
      $('#danger').html('Prosimy o wpisanie właściwej wartości').hide();
      $("#number").attr("style", "border-color: ");
    }
  });
  
});
</script>

<body>
    <form>
        <br/>
        <label for="name">Ile razy wyświetli się obrazek</label>
        <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required="">
    </form>
    <br/>
    <p>
        <img id='display' src="kaczka.jpg" />
    </p>
    <br/>
    <br/>
    <input type="submit" name="submit" id="submit" onclick="showInput()" >
    <div id="danger" class="alert alert-danger collapse"></div>
    <br/>
    <div id="img"></div>
</body>

＆＃13;

Answer 1

工作小提琴：https://jsfiddle.net/4yqqp3m6/

根据您所犯的错误，您应该继续更轻松地抓住javascript和JQuery。

所以你在这里遇到了多个问题 - 检查评论：

使用Javascript：

$(document).ready(function () {

        $('#display').hide();
        $('#danger').hide();


        var src = $('#image').val();
        var number = $('#number').val();

        function showInput(number) { // the same here to get the number

            var index = 1
            for (var index = 0; index < number; index++) {
                document.getElementById('display').innerHTML +=
                   ' <img src="https://www.w3schools.com/howto/img_fjords.jpg" />';
            }

            $('#display').show();
        }



            $("#submit").click(function () {

            //!! this part you missed
            number = $("#number").val(); // get the value from input
                        number = parseInt(number); // number is string cast it to integer
            //!!


             if (number == "") {
                //Check if number is numeric
                $('#danger').html('Prosimy o wpisanie właściwej wartości').show();
                $("#number").attr("style", "border-color: red!important");

                return false;

            } else if (number < 1 || number > 100) {
                $('#danger').html('Prosimy o wpisanie właściwej wartości').show();
                $("#number").attr("style", "border-color: red!important");

                return false;

            } else {

                showInput(number); // you have to give the number to function
                $('#danger').html('Prosimy o wpisanie właściwej wartości').hide();
                $("#number").attr("style", "border-color: ");


            }
        });
    });

HTML：

<body>
    <form>
        <br/>
        <label for="name">Ile razy wyświetli się obrazek</label>
        <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required="">
    </form>
    <br/>

    <!-- this part was wrong too... -->
    <div id='display'>
    </div>


    <br/>
    <br/>
    <input type="submit" name="submit" id="submit"> <!-- dont call show inpout yet -->
    <div id="danger" class="alert alert-danger collapse"></div>
    <br/>
    <div id="img"></div>
</body>

Answer 2

我对您的代码进行了一些重构。该演示版位于Plunker。

<强> JS

$(document).ready(function () {
    var image = document.getElementById('display').outerHTML; // to persist the image
    $('#display').hide();
    $('#danger').hide();

    function showInput(number) {
      $('#displayBox').html(''); // to remove previous images
        for (var index = 0; index < number; index++) {
          $('#displayBox').append(image);
        }
    }

    $("#submit").click(function () {
         var number = parseInt($('#number').val(), 10); // correct way to get a numeric input value
         if (isNaN(number) || (number < 1 || number > 100)) { 
            $('#danger').html('Prosimy o wpisanie właściwej wartości').show();
            $("#number").attr("style", "border-color: red!important");
            return false;
        }  
        showInput(number); // passing the actual number value
        $('#danger').html('Prosimy o wpisanie właściwej wartości').hide();
        $("#number").attr("style", "border-color: ");
    });
});

<强> HTML

<body>
    <form>
        <label for="name">Ile razy wyświetli się obrazek</label>
        <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required="">
    </form>
    <p id="displayBox"> <!-- that's what I've added to the template, here we will push our images -->
        <img id='display' src="https://cdn0.iconfinder.com/data/icons/fruits/128/Banana.png" />
    </p>
    <input type="submit" name="submit" id="submit" > <!-- no need to onclick since you have handler binding via js -->
    <div id="danger" class="alert alert-danger collapse"></div>
    <div id="img"></div>
</body>

Answer 3

对您的代码进行了少量更改：

的CSS：

#display{
    width:20%;
}

javascript：

<script>
var src = $('#image').val();
var number = $('#number').val();
$(document).ready(function () {

    $('#display').hide();
    $('#danger').hide();



    $("#submit").click(function () {
    src = $('#image').val();
    number = $('#number').val();
    console.log(number);

         if (number == "") {
            //Check if number is numeric
            $('#danger').html('Prosimy o wpisanie właściwej wartości').show();
            $("#number").attr("style", "border-color: red!important");

            return false;

        } else if (number < 1 || number > 100) {
            $('#danger').html('Prosimy o wpisanie właściwej wartości').show();
            $("#number").attr("style", "border-color: red!important");

            return false;

        } else {

            showInput()
            $('#danger').html('Prosimy o wpisanie właściwej wartości').hide();
            $("#number").attr("style", "border-color: ");


        }
    });
});

    function showInput() {
        $('#container').empty();
        var index = 1
        for (var index = 0; index < number; index++) {
            $('#container').append("<img id='display' src='image.jpg' />");
        }
    }

</script>

HTML：

<body>
    <form>
    <br/>
    <label for="name">Ile razy wyświetli się obrazek</label>
    <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required="">
</form>
<br/>
<div id="container">

</div>
<br/>
<br/>
<input type="button" name="submit" id="submit" value="submit" onclick="showInput()" >
<div id="danger" class="alert alert-danger collapse"></div>
<br/>
<div id="img"></div>
</body>

图像将显示为输入字段中输入的次数

3 个答案: