我正在用javaScript编写一个简单的应用程序。有一个猫列表，当我点击列表中的任何元素时，它会显示一个图像，当我点击该图像时，它会增加cat obj的计数属性。
点击管理员按钮后，当我尝试更新cat对象上的任何字段时，它会重新初始化为零值。
HTML代码
<ul id="list">
</ul>
<div id="cat">
<h2 id="cat-name"></h2>
<div id="cat-count"></div>
<img id="cat-img" src="">
<button id="admin" class="hide">Admin</button>
<form id="form" class="hide">
<input type="text" id="curr-cat-name"/>
<input type="text" id="curr-cat-url"/>
<input type="text" id="curr-cat-count"/>
<button id="cancel">Cancel</button>
<button id="save">Save</button>
</form>
</div>
<script type="text/javascript" src="cat.js"></script>
的Javascript
(function(){
var model = {
currentCat : null,
init: function() {
this.cats = [
{
"name" : "Cat 1",
"src" : "https://s-media-cache-ak0.pinimg.com/736x/f0/26/05/f0260599e1251c67eefca31c02a19a81.jpg",
"count" : 0
},{
"name" : "Cat 2",
"src" : "https://dq25e8j0im0tm.cloudfront.net/images/public/search/Search_Tab_Cat_395x335-3.png",
"count" : 0
},{
"name" : "Cat 3",
"src" : "http://www.pak101.com/funnypictures/Animals/2012/8/2/the_monopoly_cat_vbgkd_Pak101(dot)com.jpg",
"count" : 0
}, {
"name" : "Cat 4",
"src" : "https://files.graphiq.com/stories/t2/tiny_cat_12573_8950.jpg",
"count" : 0
}, {
"name" : "Cat 5",
"src" : "http://cdn-img.health.com/sites/default/files/styles/400x400/public/styles/400x400/public/styles/main/public/how-take-care-cat-400x400.jpg?itok=ta2kPB58",
"count" : 0
}
];
},
getAllCats: function() {
console.log(this.cats);
return this.cats;
},
updateCat: function(cat) {
model.currentCat.name = cat.name;
model.currentCat.count = parseInt(cat.count);
model.currentCat.src = cat.src;
console.log(model.getAllCats);
}
}
var octopus = {
init: function() {
model.init();
model.currentCat = model.getAllCats[0];
view.init();
},
getCats: function() {
return model.getAllCats();
},
setCurrentCat: function(cat) {
console.log(cat);
model.currentCat = cat;
},
modifyCat : function(obj) {
model.updateCat(obj);
},
incrementCounter: function() {
model.currentCat.count++;
view.renderCat();
},
getCurrentCat: function() {
return model.currentCat;
}
}
var view = {
init: function() {
this.list = document.getElementById("list");
this.catImg = document.getElementById("cat-img");
this.catName = document.getElementById("cat-name");
this.catCount = document.getElementById("cat-count");
this.adminBtn = document.getElementById("admin");
this.adminBtn.addEventListener('click', function(){
view.renderForm();
});
this.catImg.addEventListener('click', function(){
octopus.incrementCounter();
});
// render this view (update the DOM elements with the right values)
view.renderList();
},
renderList: function() {
var catLis = document.getElementById("list");
octopus.getCats().forEach(function(cat){
var elem = document.createElement("li");
elem.textContent = cat.name;
elem.addEventListener('click', (function(catCopy){
return function(){
octopus.setCurrentCat(catCopy);
view.renderCat();
};
})(cat));
this.list.appendChild(elem);
});
},
renderCat: function() {
var currentCat = octopus.getCurrentCat();
this.catCount.textContent = currentCat.count;
this.catName.textContent = currentCat.name;
this.catImg.src = currentCat.src;
this.adminBtn.classList.remove("hide");
this.adminBtn.classList.add("show");
},
renderForm: function() {
var currentCat = octopus.getCurrentCat();
this.form = document.getElementById("form");
this.form.classList.remove("hide");
this.form.classList.add("show");
this.catFormImg = document.getElementById("curr-cat-url");
this.catFormName = document.getElementById("curr-cat-name");
this.catFormCount = document.getElementById("curr-cat-count");
this.catFormCount.value = currentCat.count;
this.catFormName.value = currentCat.name;
this.catFormImg.value = currentCat.src;
this.cancelBtn = document.getElementById("cancel");
this.saveBtn = document.getElementById("save");
this.saveBtn.addEventListener('click', function(){
console.log(view);
octopus.modifyCat({
name: document.getElementById("curr-cat-name").value,
count: document.getElementById("curr-cat-count").value,
src: document.getElementById("curr-cat-url").value
});
/*this.form.classList.remove("show");
this.form.classList.add("hide");
view.adminBtn.classList.remove("show");
view.adminBtn.classList.add("hide");*/
});
this.cancelBtn.addEventListener('click', function(){
this.form.classList.remove("show");
this.form.classList.add("hide");
view.adminBtn.classList.remove("show");
view.adminBtn.classList.add("hide");
});
}
}
octopus.init();
})();
CSS
#result {
display: inline-block;
padding: 0 10px;
font-weight: medium;
font-size: 34px;
}
img {
vertical-align: middle;
border-radius: 50%;
border: 1px solid black;
}
.hide {
display: none;
}
.show {
display: inline-block;
}
答案 0 :(得分：1)
单击保存按钮时，会触发<form>，导致浏览器重新加载页面。查看浏览器选项卡。它几乎不可识别，因为它发生得如此之快。为了防止浏览器重新加载，您至少有两个选项。
event是点击。您可以使用event.preventDefault()阻止页面重新加载。请参阅@Icepickle的评论，了解更多可能性。