我正在尝试以这种方式删除和恢复元素: 删除时(通过按红色“x”)元素的图片将出现在导航栏中， 当在导航栏中单击图像时，该元素将恢复到页面上。
如您所见，当前被注释掉的最后两个函数是我一直试图用来实现此功能的函数，但是当我删除注释“/*”时，我的其他 javascript 函数将停止工作。任何帮助将不胜感激。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="jquery-cookie-master"/>
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/carousel.js" />
<link rel="stylesheet" type="text/css" href="shopping.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<header>
<h4><mark>Student Project #5 H.B.</mark></h4></br>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand deleted-item hidden" id="box1">
<img class="navpics" src="surface3.jpg" alt="Microsoft Surface">
</a>
<a class="navbar-brand deleted-item hidden" id="box2">
<img class="navpics" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
</a>
<a class="navbar-brand deleted-item hidden" id="box3">
<img class="navpics" src="mabook.jpg" alt="Apple Macbook Pro Retina">
</a>
<a class="navbar-brand deleted-item hidden" id="box4">
<img class="navpics" src="superdrive.jpg" alt="Apple SurperDrive">
</a>
<a class="navbar-brand deleted-item hidden" id="box5">
<img class="navpics" src="case1.jpg" alt="Laptop Case">
</a>
</div>
</div>
</div>
<h2>Premium Computer Supplies!</h2>
</header>
<ul id="sortable" style="list-style-type:none">
<!----------------------------------------------------------------->
<!--<div id="all">-->
<li class="ui-state-default"><div class="row" id="box1">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="a" src="surface3.jpg" alt="Microsoft Surface">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3</h3>
<div class="description" id="pnd1" hidden>
<!--Description and price-->
<div >
<p>With a variety of processors and memory options, there's a Surface for everyone!</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box2">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="b" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3 Typer Cover</h3>
<div class="description" id="pnd2" hidden>
<!--Description and price-->
<div>
<p>The Type Cover is a perfect accessory for your Surface!</p>
<p>Starting at $129!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box3">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="c" src="mabook.jpg" alt="Apple Macbook Pro Retina">
<!--Accordion heading-->
<h3>Macbook Pro Retina Display</h3>
<div class="description" id="pnd3" hidden>
<!--Description and price-->
<div>
<p>The Macbook is a must-have for students, parents, and more!</p>
<p>Starting at $1299!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box4">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="d" src="superdrive.jpg" alt="Apple SurperDrive">
<!--Accordion heading-->
<h3>Apple SuperDrive</h3>
<div class="description" id="pnd4" hidden>
<!--Description and price-->
<div>
<p>Able to read disks, the SuperDrive is essential for burning music and home-movies!</p>
<p>Starting at $79!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box5">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="e" src="case1.jpg" alt="Laptop Case">
<!--Accordion heading-->
<h3>Laptop Case</h3>
<div class="description" id="pnd5" hidden>
<!--Description and price-->
<div>
<p>Carry your computer with you anywhere with a computer bag!</p>
<p>Starting at $39!</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!----------------------------------------------------------------->
<script>
$( ".row" ).mouseenter(function() {
$(this).animate({
fontSize : '17',
opacity : '0.6',
}, 1);
});
$( ".row" ).mouseleave(function() {
$(this).animate({
fontSize : '14',
opacity : '1',
}, 1);
});
$("div#box1").click(function(){
$("#pnd1").animate({
hidden: 'toggle'
});
});
$("div#box2").click(function(){
$("#pnd2").animate({
hidden: 'toggle'
});
});
$("div#box3").click(function(){
$("#pnd3").animate({
hidden: 'toggle'
});
});
$("div#box4").click(function(){
$("#pnd4").animate({
hidden: 'toggle'
});
});
$("div#box5").click(function(){
$("#pnd5").animate({
hidden: 'toggle'
});
});
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
$('button.close').click(function() {
$(this).parent().animate({
'opacity': 0
}, 1, function() {
$(this).css({'display': 'none'})
})
$(".deletedItem#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
</script>
</body>
CSS:
.bodypics {
width:290px;
height:200px;
}
header{
background-color: royalblue;
color:gold;
padding-left: 0;
width:100%
}
body{
width:90%;
background-color: lightgray;
font-size: 3;
padding-left: 5%
}
.row{
background-color: white;
width:300px;
height:400px;
padding-left: 1px;
border: 1px solid royalblue;
margin: 2px;
}
#all{
width:90%;
}
#sortable li {
height: 402px;
float: left;
}
.close{
color:red;
}
.navpics{
width: 70px;
height: 30px;
}
最佳答案
我想通了!主要是我粗心和缺乏经验的结合，但这是解决方案: 只需更改最后一段代码:
$('button.close').click(function() {
var name = $(this).parent().attr("id");
$(this).parent().toggleClass("hidden");
$(".deleted-item#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
现在一切都很好!
关于javascript - 删除和恢复元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31039494/