Question

我有一个由用户自动创建的简单块，我希望此元素在创建后自动保存。

HTML

 <div class="main-container">
   <ul class="menu-options">
      <li id="btn-add-movie-block" class="menu-option">Add movie
    block
      </li>
   </ul>
 </div>

JavaScript文件

var jsonData =json.parse('{"movies:[]"}');

function addMovieBlock() {
    var newMovie = $('<div id="movie-block">New Movie</div>');
    $(".main-container").append(newMovie);
}    

$("#btn-add-movie-block").on("click", function () {
    addMovieBlock();
}

<ul class="menu-options">
    <li id="btn-add-movie-block" class="menu-option">Add movie
        block</li>
</ul>

我只想将此块保存到上面的JSON数据？如何使用一种简单的方法实现这一目标？

Answer 1

您的JSON解析格式不正确，请更改为var jsonData =JSON.parse('{"movies":[]}');

您可以通过推jsonData.movies.push(newMovie);

添加

var jsonData =JSON.parse('{"movies":[]}');

function addMovieBlock() {
    var newMovie = $('<div id="movie-block">New Movie</div>');
    $(".main-container").append(newMovie);
    jsonData.movies.push(newMovie);
    console.log(jsonData)
}    

$("#btn-add-movie-block").on("click", function () {
    addMovieBlock();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
   <ul class="menu-options">
      <li id="btn-add-movie-block" class="menu-option">Add movie
    block
      </li>
   </ul>
 </div>




<ul class="menu-options">
    <li id="btn-add-movie-block" class="menu-option">Add movie
        block</li>
</ul>

Answer 2

使用普通的对象文字来建立列表，除非您收到JSON字符串并且需要使用对象，否则根本不要使用JSON.parse()。在下面的演示中是一个添加/删除列表，只要页面不刷新，您将在控制台中看到的对象一直存在-您需要时对其进行字符串化。正如Nguyen先生所说，请使用push()添加。尽管未要求，但我添加了一个使用splice()的删除功能。这只会添加/删除<li>中的数据，而不是标记中的数据。

在数据结构（JSON字符串，对象，数组等）中仅包含数据，并在需要时（即需要在浏览器中显示数据时）分别生成DOM对象是一种更清洁的方法。如果您仍要保留标记更改：
```
data.movies.push(movie);
```
收件人：
```
data.movies.push(newMovie);
```
在addMovie()回调函数中。
用户第二次单击时，您正在复制id="movie-block"。重复的ID是无效的HTML，最有可能破坏jQuery / JavaScript。在jQuery中，您可以99％的时间使用类。尽量避免使用ID。

let data = {
  movies: []
};

function addMovie() {
  const movie = $('.movieInput').val();
  const newMovie = $(`<li class="movie">${movie} <b>&ndash;</b></li>`);
  data.movies.push(movie);
  $('.movieInput').val('');
  $(".movies").append(newMovie);
  console.log(data);
}

function delMovie() {
  let idx = $(this).closest('li').index();
  $(this).closest('li').remove();
  data.movies.splice(idx, 1);
  console.log(data);
}

$(".add").on("click", addMovie);
$('.movies').on('click', 'b', delMovie);

:root {
  font: 400 16px/1.2 Arial
}

.menu {
  list-style: none;
  text-indent: -5vw;
}

input {
  font: inherit;
  display: inline-block
}

a {
  text-decoration: none
}

b {
  font-size: 1.2rem;
  cursor: pointer;
}

.as-console-wrapper {
  width: 50%;
  margin-left: 50%;
  min-height: 80%;
}

.as-console-row.as-console-row::after {
  content:'';
  padding:0;
  margin:0;
  border:0;
  width:0;
}

<main class="main">
  <ul class="menu">
    <li class='option'>
      <input class='movieInput' list='movieList' autocomplete='off'>
      <datalist id='movieList'>
        <option value='Pulp Fiction'>
        <option value='Kung Fu Hustle'>
        <option value='True Romance'>
        <option value='Old Boy'>    
      </datalist>
      <a href='#/' class='add'> <b>&plus;</b> Add Movie</a>
    </li>

  </ul>
  <ol class='movies'></ol>
</main>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何使用Javascript将动态创建的元素保存到json？

2 个答案: