Javascript JS应用程序自动刷新/元素消失编辑

已编辑

设法使大部分工作正常，但在接近结束时遇到了问题

我有一个带有几个输入字段和div元素的html文件，在创建它时，我必须向其中附加一个菜谱

因此，我有两个模块分开的类——recipe和book，还有一个app.js文件，它应该将这两个类组合成一个工作应用程序

我现在遇到的问题是，每当我单击“添加”按钮时，配方仅显示一毫秒，然后消失。。我不知道为什么。可能是因为我的类是自调用的吗？我试着用标准的方法来做，运行

x instanceof y

总是因为某种原因返回false。 我上传了一个视频短片，将问题形象化

另外，当我尝试将对象r推送到book中后调用book.getRecipes（）时，我得到的是[object object]，而不是r中包含的值

如果需要，可以提供更多信息

多谢各位

var Recipe = (function() {

  var nextId = 1;

  var constr = function(name, rating, image, category) {

    this._id = nextId++;
    this._name = name || '';
    this._rating = rating || '';
    this._image = image || '';
    this._category = category || '';

    this.setName = function(name) {
      this._name = name;
    };

    this.setRating = function(rating) {
      this._rating = rating;
    };

    this.setImage = function(image) {
      this._image = image;
    };

    this.setCategory = function(category) {
      this._category = category;
    };
  };
  return constr;
})();

及

和app.js，在那里它都是初始化的（loadData函数是预先编写的（不是我写的！）：

---

app.js大部分是由另一个人预先编写的，我在其中的工作是添加DOM操作（添加/删除书籍等）

看起来您的单击处理程序中有一个额外的}。可能是打字错误。你把你的书命名为“book”，然后又把它的一个实例命名为同一个名字，这让人很困惑。需要向book构造函数传递一个数组以分配给它的_recipes属性。你可以

`this._recipes = recipes || [];

撇开那些烦琐的东西不谈，我不知道是什么让你困惑。您可能需要使用jQuery和如下语句从HTML中获取数据

`var name = $('input selector string').val()`
 or possibly 
`var rating = $('div selector string').html()'

等等

然后用这些值调用配方构造函数

---

最后将其作为book添加到您的书中。add（newRecipe）

看起来您的单击处理程序中有一个额外的}。可能是打字错误。你把你的书命名为“book”，然后又把它的一个实例命名为同一个名字，这让人很困惑。需要向book构造函数传递一个数组以分配给它的_recipes属性。你可以

`this._recipes = recipes || [];

撇开那些烦琐的东西不谈，我不知道是什么让你困惑。您可能需要使用jQuery和如下语句从HTML中获取数据

`var name = $('input selector string').val()`
 or possibly 
`var rating = $('div selector string').html()'

等等

然后用这些值调用配方构造函数

---

最后把它作为书添加到你的书中。添加（新配方）

你应该这样做：

<form id="newRecipe">
    <input id="name" type="text"/>
    <input id="rating" type="text"/>
    <input id="file" type="file"/>
    <select id="category" >
        <option>Cat 1</option>
        <option>Cat 2</option>
    </select>
    <input type="submit" value="Add Recipe" />
</form>

<script>
$("#newRecipe").submit(function(){

    var name = $(this).find("#name").val();
    var rating = $(this).find("#rating").val();
    .....
})
</script>

---

你应该这样做：

<form id="newRecipe">
    <input id="name" type="text"/>
    <input id="rating" type="text"/>
    <input id="file" type="file"/>
    <select id="category" >
        <option>Cat 1</option>
        <option>Cat 2</option>
    </select>
    <input type="submit" value="Add Recipe" />
</form>

<script>
$("#newRecipe").submit(function(){

    var name = $(this).find("#name").val();
    var rating = $(this).find("#rating").val();
    .....
})
</script>

---

你能添加你的html吗？你有点混合了“新”逻辑和功能逻辑。你想走哪条路？呃，这不是对问题的回答。对不起，不太确定，如果我是的话，我不会寻求帮助。如果我把“新”逻辑和功能逻辑混合在一起，这就很好地回答了你的问题。仍然在学习，我不知道哪种方法是正确的，你能添加你的html吗？你有点混合了“新”逻辑和函数逻辑。你想走哪条路？呃，这不是对问题的回答。对不起，不太确定，如果我是的话，我不会寻求帮助。如果我把“新”逻辑和功能逻辑混合在一起，这就很好地回答了你的问题。还在学习，我不知道哪条路是对的，非常感谢你们的回复。至于为什么有些事情看起来让人困惑——我对OOP很陌生，这是我被分配的任务的一部分。app.js是预先编写的，我的角色是实现“recipe”和“book”类，添加一些DOM操作并使它们一起工作。在此之前，我完全不熟悉JS中的类，有些东西仍然很难理解。我会继续努力，最终会完成的。很抱歉给您带来困惑。非常感谢您的回复。至于为什么有些事情看起来让人困惑——我对OOP很陌生，这是我被分配的任务的一部分。app.js是预先编写的，我的角色是实现“recipe”和“book”类，添加一些DOM操作并使它们一起工作。在此之前，我完全不熟悉JS中的类，有些东西仍然很难理解。我会继续努力，最终会完成的。为这一混乱道歉。