Динамический массив JQuery

Я хочу создать динамический массив с данными из ввода. Позже я хочу написать собранные данные в div. Как я могу это сделать?Динамический массив JQuery

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<body> 
<p>Click the button to add a new element to the array.</p> 
<input type="text" id="data"> 
<button onclick="myFunction()">Try it</button> 
<button onclick="myFunction2()">Add</button> 
<p id="demo"></p> 
<script> 
    var fruits = []; 
    function myFunction() { 
    var x=$("#data").val(); 
    fruits.push(x); 
    $("#data").val(""); 
    for(var i=0;i<fruits.length;i++) { 
     $("#demo").html(fruits[i]); 
    } 
    } 

</script> 
</body> 
</html>

источник

2016-03-10 SezKo

Я не уверен, какие именно пытаются достичь, но вам необходимо установить критерии ввода, например, значения, разделенные запятыми.

Или разделите их на основе символа пробела.

затем сделать это следующим образом,

<script> 
    var fruits = []; 
    function myFunction() { 
     var x=$("#data").val().split(' '); // Use .split(',') if you want to split them on basic of a comma 
     $("#data").val(""); 
     for(var i=0;i<x.length;i++) { 
      fruits.push(x[i]); 
     } 
     // Now you have the array containing the fruits, add them to DOM 
     $("#demo").html(fruits.join('<br/>')); // Single fruit per line 
    } 
</script>

источник

2016-03-10 19:15:29

Спасибо за ответ. Код работает. Но я хочу, чтобы вы вошли после того, как данные были введены ранее введенными данными. Здесь только введенное значение добавляется к предыдущему значению. Например, когда значение 1, введите 2 после ввода 1 и 2, я хочу собраться вместе. – SezKo

Ну, если вы хотите вводить значения один за другим и добавлять их в массив, тогда ваш код уже прекрасен, просто удалите цикл из вашего кода и поместите $ («# demo»). Html (fruits.join ('
')); эта строка кода вместо цикла. или вы также можете использовать функцию .append() таким образом, чтобы вам даже не понадобился массив. –

Попробуйте добавить htmlString. Вы заменяете его.

var htmlString = "" 
for(var i=0;i<fruits.length;i++) { 
    htmlString += fruits[i]; 
} 
$("#demo").html(htmlString);

И полный код будет,

<script> 
    var fruits = []; 
    function myFunction() { 
    var x=$("#data").val(); 
    fruits.push(x); 
    $("#data").val(""); 
    var htmlString = "" 
    for(var i=0;i<fruits.length;i++) { 
     htmlString += fruits[i]; 
    } 
    $("#demo").html(htmlString); 
    } 
</script>

И совершенный подход был бы,

<!DOCTYPE html> 
<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <body> 
    <p>Click the button to add a new element to the array.</p> 
    <input type="text" id="data"> 
    <button id="try">Try it</button> 
    <button>Add</button> 
    <p id="demo"></p> 
    <script> 
     var fruits = []; 
     var data = $("#data"); 
     var demo = $("#demo"); 
     $("#try").click(function(){ 
     fruits.push(data.val()); 
     data.val(""); 
     demo.html(fruits.join(" ")); 
     }); 
    </script> 
    </body> 
</html>

источник

2016-03-10 19:07:49

Спасибо за ответ, но не работает – SezKo

@SezKo какой? –

@SezKo Проверьте эту демонстрационную версию https://jsfiddle.net/gx4L8owc/ Работает. –

Динамический массив JQuery

ответ

Смежные вопросы