Question

我编写了从文本框中获取输入值并使用添加按钮将其添加到数组中的代码，并在单击显示按钮时显示数组的值。

问题是我使用JavaScript做了所有这些，现在我想用jQuery来做。我试过这个网站的代码片段，但它没有用。请帮忙。

<body>
  <script src="jquery-3.3.1.js"></script>

  <input type="text" id="text1"></input>
  <input type="button" id="button1" value="Add" onclick="add_element_to_array();"></input>
  <input type="button" id="button2" value="Display" onclick="display_array();"></input>
  <div id="Result"></div>


  <script>

    var x = 0;
  var sample = [];    // <-- Define sample variable here

      function add_element_to_array(){

        $(document).on('click', '#btnSubmit', function () {
            var test = $("input[name*='i_name']");

            $(test).each(function (i, item) {
                sample.push($(item).val());
            });

            console.log(sample.join(", "));
        });

    }


    function display_array() {
        var e = "<hr/>";
        for (var y = 0; y < sample.length; y++) {
            e += "Element " + y + " = " + sample[y] + "<br/>";
        }
        document.getElementById("Result").innerHTML = e;
    }

  </script>


 </body>

Answer 1

您可以使用此代码了解它应该如何工作。您还可以在将值推入数组之前检查非空值，因为数组中的空值没有任何意义。

＆＃13;

$(document).ready(function(){
var valueArray = [];
//add value in array
$('#button1').click(function(){
  var textValue = $('#text1').val();
  //push non empty value only
  if(textValue.trim() !== ''){
     valueArray.push(textValue);
     //reset the text value
     $('#text1').val('');
  }
});

//display value
$('#button2').click(function(){
  $('#Result').html(valueArray.toString());
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1"></input>
  <input type="button" id="button1" value="Add"></input>
  <input type="button" id="button2" value="Display"></input>
  <div id="Result"></div>

＆＃13;

Answer 2

我已经添加了jquery脚本，考虑以下内容作为建议的html。

<input type="text" id="text1"></input>
<input type="button" id="button1" value="Add"></input>
<input type="button" id="button2" value="Display"></input>
<div id="Result"></div>

inptArr必须是全局数组。

<script>
var inptArr = [];
$('#button1').on('click',function(){
    if($('#text1').val() != '')
       inptArr.push($('#text1').val()); 
});

$('#button2').on('click',function(){
    var string = '';
    var lastIndex = parseInt(inptArr.length - 1);
    for(var i = 0; i <= lastIndex ; i++)
    {
        if(i == lastIndex)
            string += inptArr[i];
        else    
            string += inptArr[i] + ',';
    }
    $('#Result').append(string);
});
</script>

Answer 3

这是通过微小变化实现目标的另一种方式。

您只有一个文本输入元素，因此不需要任何each循环。

如果从代码的开始定义脚本，则需要

document.ready()，因为在启动时没有定义的元素具有btnSubmit的id，因此该块必须等待dom元素准备好。< / p>

使用jquery时，您在getElementById函数上也不需要纯JavaScript代码display_array()。您可以将其更改为$("#Result").html(e);

＆＃13;

var x = 0;
var array = [];

$(document).ready(function(){    
    $('#btnSubmit').on('click', function () {
      array.push($("#text1").val());
    });
});

function display_array() {
    var e = "<hr/>";
    for (var y = 0; y < array.length; y++) {
        e += "Element " + y + " = " + array[y] + "<br/>";
    }
    $("#Result").html(e);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1"/>
  <input type="button" id="btnSubmit" value="Add"/>
  <input type="button" id="button2" value="Display" onclick="display_array();"/>
  <div id="Result"></div>

＆＃13;

Answer 4

在您的代码中，传递给onclick属性的函数将click事件绑定到DOM - 不要这样做。

var array  = Array();
var input  = $("#text1");
var result = $("#result");

function add_element_to_array(){

  var value = input.val();
  array.push(value);
  console.log("Add:", value);
  // input.val(""); // bonus: clears input after adding text to an array

}

function display_array() {
    
  result.text(array.toString());
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1">
<input type="button" id="button1" value="Add" onclick="add_element_to_array();">
<input type="button" id="button2" value="Display" onclick="display_array();">
<div id="result"></div>

如何接受文本框中的输入并在jQuery中以数组格式显示？

4 个答案: