Question

有没有办法通过按钮点击从 html 获取这样的格式化对象？

var Movie = [{id:"tt3783958", title:"La La Land", type:"Comedy, Drama, Music", year:"2016"}];

然后点击下一步按钮，以附加这样的下一个对象？

var Movie = [ {id:"tt3783958", title:"La La Land", type:"Comedy, Drama, Music", year:"2016"}, {id:"tt0488120", title:"Fracture", type:"Crime, Drama, Mystery", year:"2007"} ];

现场演示： https://jsfiddle.net/q94eemn8/1/

Answer 1

这是一种可以做到这一点的方法。它并不完全清楚你想要完成什么，所以我做了一些猜测。

工作示例：https://jsfiddle.net/Twisty/tre7dx8a/

为HTML中的每个按钮添加了add作为类。

<强>的JavaScript

$(function() {
  var Movies = [];
  $(".btn.btn-outline-success").click(function(e) {
    if ($(this).hasClass("add")) {
      var row = $(this).closest("tr");
      var movie = {};
      movie.id = row.find("td:eq(0)").html();
      movie.title = row.find("td:eq(1)").html();
      movie.year = row.find("td:eq(2)").html();
      movie.type = row.find("td:eq(3)").html();
      Movies.push(movie);
      console.log("Added Movie:", movie);
      $(this).html("Remove").toggleClass("add remove");
    } else {
      var id = $(this).closest("tr").find("td:eq(0)").html();
      var index = -1;
      $.each(Movies, function(k, v) {
        if (v.id == id) {
          index = k;
        }
      });
      if (index > -1) {
        Movies.splice(index, 1);
        console.log("Removed Movie:", id);
        $(this).html("Add").toggleClass("add remove");
      }
    }
  });
});

点击Add后，会创建一个movie对象，并使用<td>中<tr>的项目进行填充。我使用:eq()选择器来专门识别每个元素。然后我使用.html()来读取元素的内容。我也可以使用.text()。

然后我认为用户可能会犯错误或改变主意，因此我将按钮设置为切换为Remove。这有类似的操作，但会从存储阵列中找到并删除movie。

您可以以类似的方式将它们移动到本地存储。可能值得编写一个函数来往来自本地存储器来回发送数据。

从HTML元素创建JSON对象（jQuery）

1 个答案: