Question

我试图以这种方式删除和恢复项目：删除后（按红色＆＃39; x＆＃39;）项目的图片将显示在导航栏中，在导航栏中单击图像时，该项目将恢复到页面上。

正如您所看到的，目前已注释掉的最后两个功能是我尝试用来实现此功能的功能，但是当我删除注释时，＆＃39; / *＆＃39;我的其他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;
}

Answer 1

我已经弄明白了！主要是我粗心和缺乏经验的组合，但这是解决方案：只需更改最后一段代码：

 $('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");
    });

现在一切都很花花公子！

删除和恢复项目

1 个答案: