学习总结
继续完善了上次的页面 修改的内容思路如下
1,为所有的修改按钮绑定函数 传值为this
2,点击此按钮时候会将原有的值赋给输入框 同时因为接口用的是_id
所以我需要获取储存的隐藏的盒子 在这个点击方法中赋值给确认修改的按钮下隐藏的盒子内容
3点击确认按钮时候将方法调用 同时传输入框内容和_id值
代码如下
var changefoodagin = document.getElementById("changefoodagin");
var rightchangefoodagin = document.getElementById("rightchangefoodagin");
// 获取输入框内容
var lookFoodID = document.getElementById("lookFoodID");
var searchFoodmoney = document.getElementById("searchFoodmoney");
var searchFoodphone = document.getElementById("searchFoodphone");
var searchFoodnowtime = document.getElementById("searchFoodnowtime");
var hiddenFood=document.getElementById("hiddenFood");
// 修改食物留下的问题
function changefoodNew(food) {
foodBoxShadow.style.display = "";
//为输入框赋值
lookFoodID.value = food.parentElement.parentElement.children[0].innerHTML;
searchFoodmoney.value = food.parentElement.parentElement.children[1].innerHTML;
searchFoodphone.value = food.parentElement.parentElement.children[2].innerHTML;
searchFoodnowtime.value = food.parentElement.parentElement.children[3].innerHTML;
console.log(food.parentElement.nextElementSibling);
//将内容赋值给新的盒子
hiddenFood.innerHTML=JSON.parse(food.parentElement.nextElementSibling.innerHTML)._id;
}
var changefoodagin = document.getElementById("changefoodagin");
changefoodagin.onclick = function () {
foodBoxShadow.style.display = "none";
//调用方法
changeFoodAll(lookFoodID.value, searchFoodmoney.value, searchFoodphone.value, searchFoodnowtime.value,hiddenFood.innerHTML);
}
var rightchangefoodagin = document.getElementById("rightchangefoodagin");
rightchangefoodagin.onclick = function () {
foodBoxShadow.style.display = "none";
}
// 修改食物接口
function changeFoodAll(foodname, foodprice, fooddes, foodtype,foodid) {
$.ajax({
type: "POST",
url: "http://118.195.129.130:3000/food/update",
data: {
name: foodname,
price: foodprice,
desc: fooddes,
typename: foodtype,
_id:foodid
},
success: function (result) {
console.log("---------");
console.log(result);
getData(foodPageNum.innerHTML, perPage);
},
error: function (err) {
console.log(err)
}
})
}
HTML代码如下
div class="foodBoxShadow" id="foodBoxShadow" style="display: none">
<div class="findfoodHidden" id="" >
<p style="font-size:18px;">修改食物信息</p></br>
<span class="spaName">名称</span>
<input type="text" placeholder="请输入食物名称" id="lookFoodID" autocomplete="off"
class="changeFoodwords">
<span class="spaName">金额</span>
<input type="number" placeholder="请输入食物金额" id="searchFoodmoney" autocomplete="off">
<span class="spaName">描述</span>
<input type="text" placeholder="请输入食物描述" id="searchFoodphone" autocomplete="off">
<span class="spaName">种类</span>
<input type="text" placeholder="请输入食物种类" id="searchFoodnowtime" autocomplete="off">
<div id="hiddenFood" style="display: none;"></div>
<div class="addfoodaginbox">
<button id="changefoodagin">确认修改</button>
<button id="rightchangefoodagin">取消修改</button>
</div>
</div>
</div>
发送验证码的定时器
var time=60;
// 倒计时全局变量
var getRecive=document.getElementById("getRecive");
getRecive.addEventListener('click',function(){
if(!email.test(addorderEmail.value)){
alert("请输入正确的邮箱");
}else{
getRecive.disabled=true;
var restTime=setInterval(function(){
if(time==0){
clearInterval(restTime);
// 清除定时器
getRecive.disabled=false;
// 启用按钮
time=60;
getRecive.innerHTML="获取";
}
else{
getRecive.innerHTML="剩余"+time+"秒";
time--;
}
},1000)
}
select
var foodIndex = foodpageChange.selectedIndex;
// 获取索引
var perPage = foodpageChange.options[foodIndex].value;
// 获取里面的值
function changeperpage() {
foodIndex = foodpageChange.selectedIndex;
perPage = foodpageChange.options[foodIndex].value;
// 重新获取select的值进行切换 重新赋值
getData(foodPageNum.innerText, perPage)
}
###生活体会
每天过的很累但是也很充实 希望每一天都开心