如何删除carouFredSel上的项目？

时间：2013-05-17 12:23:28

标签： jquery caroufredsel

我正在尝试制作一个可以删除项目的旋转木马，并让它与旋转木马上的其中一个项目一起工作，但它似乎不能与以下任何人有任何想法的项目一起使用？

的Javascript 

$(document).ready(function() {
        $("#carousel").carouFredSel({
            width : 675,
            height : 130,
            align : "left",
            auto : {
                pauseOnHover : true
            },
            items : {
                visible:5
            },
            scroll : {
                items : 1
            },
            prev : {
                button : "#carPrev",
                key : "left"
            },
            next : {
                button : "#carNext",
                key : "right"
            }
        }).find("#delButton").click(function(){
            $("#rvBox").animate({
                opacity : 0
            }, 500).animate({
                width   : 0,
                margin  : 0,
                borderWidth : 0
            }, 500, function(){
                $("#carousel").trigger("removeItem", $("#rvBox"));
            });
        });
      });

HTML 

<body>
    <div id="container">
        <header>
            <h1>Recently Viewed Items Carousel</h1>
        </header>
        <div id="rViewed">
            <div id="carousel">
                <div id="rvBox" class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img1.jpg" />
                </div>
                <div id="rvBox" class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img2.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img3.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img4.jpg" />
                </div>
                    <div class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img5.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img6.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img7.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" id="delButton" href="#"></a>
                    <img src="img/img8.jpg" />
                </div>
            </div>
            <a class="prev" id="carPrev" href="#"></a>
            <a class="next" id="carNext" href="#"></a>

        </div>
    </div>
</body>

CSS 

body {

}

h1 {
    font-family: Arial, Verdana, sans-serif;
    font-size: 20px;
    text-align: center;
}

/*DIV's*/

#container {
    position:relative;
    width:974px;
    margin:auto;
    background:#fff9b6;
}

#rViewed {
    position:relative;
    width:974px;
    height:140px;
    background:#ffffff;
    padding: 15px 0 15px 0;
}

#carousel {
    width:800px;
    margin:0 0 0 40px;
}

.rvBox {
    position:relative;
    display:block;
    float:left;
    margin: 0 15px 0 0;
    width:120px;
    height:120px;
    border:1px solid #dedede;
    text-align:center;
    background:url(../img/grad-x.jpg) repeat-x;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 3px 3px 3px #888;
    -webkit-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #888;
}

.rvBox img {
    margin-top:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

a.prev {
    background:url(../img/left.png) no-repeat;
    width: 31px;
    height: 31px;
    display:block;
    position:absolute;
    top:60px;
}

a.prev:hover {
    background:url(../img/left_hover.png) no-repeat;
}

a.next {
    background:url(../img/right.png) no-repeat;
    width: 31px;
    height: 31px;
    display:block;
    position:absolute;
    top:60px;
    right:220px;
}

a.next:hover {
    background:url(../img/right_hover.png) no-repeat;
}

a.delete {
    background:url(../img/delete.png) no-repeat;
    width: 21px;
    height: 21px;
    display: block;
    position:absolute;
    top:3px;
    right:3px;
}

a.delete:hover {
    background:url(../img/delete_hover.png) no-repeat;
}

3 个答案:

答案 0 :(得分：4)

首先，您不需要重复#delButton和#rvBox。 ID不应重复。实际上，您可以完全删除这些ID，因为您只能使用类名。

以下是您的HTML现在的样子：

<body>
    <div id="container">
        <header>
            <h1>Recently Viewed Items Carousel</h1>
        </header>
        <div id="rViewed">
            <div id="carousel">
                <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img1.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img2.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img3.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img4.jpg" />
                </div>
                    <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img5.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img6.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img7.jpg" />
                </div>
                <div class="rvBox">
                    <a class="delete" href="#"></a>
                    <img src="img/img8.jpg" />
                </div>
            </div>
            <a class="prev" id="carPrev" href="#"></a>
            <a class="next" id="carNext" href="#"></a>

        </div>
    </div>
</body>

对于删除链接，您可以绑定到.delete类上的click事件。例如：

.find(".delete").click(function(){});

这是可以接受的原因是单击的特定链接在该事件处理程序中变为this。因此，可以使用$(this)访问jQuery包装的链接。

这个类也可以访问rvBox，但是这里缺少的是你在处理程序中唯一感兴趣的rvBox是rvBox，它是点击链接的父级。您不想删除所有项目。

因此处理程序可以重写为：

.find(".delete").click(function(){
    var box = $(this).parent();
    $(box).animate({
        opacity : 0
    }, 500).animate({
        width   : 0,
        margin  : 0,
        borderWidth : 0
    }, 500, function(){
        $("#carousel").trigger("removeItem", box);
    });
});

答案 1 :(得分：1)

rvBox作为id引用只能在一个页面中使用一次，你已多次使用它。您可以返工或使用类名来查找和删除。

答案 2 :(得分：0)

我似乎通过改变我正在使用的.find（）从DIV id寻找到搜索范围来解决这个问题，不是最好的解决方案，但它有效！有人能告诉我为什么我不能使用.find（）来搜索div id吗？

相关问题
最新问题