3

我正在尝试制作一个允许您删除项目的轮播，并让它与轮播上的其中一个项目一起使用，但它似乎不适用于以下项目有人有任何想法吗？

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;
}
4

3 回答 3

4

首先，您需要没有重复#delButton的 s 和#rvBoxs。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进入了该事件处理程序。因此可以使用 jQuery 包装的链接访问$(this)。

rvBoxs 也可以由类访问，但这里缺少的是，您在处理程序中唯一感兴趣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);
    });
});
于 2013-10-02T13:49:51.183 回答
1

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

于 2013-05-24T14:58:50.273 回答
0

我似乎通过将我使用 .find() 从 DIV id 寻找的内容更改为搜索跨度来完成这项工作，可能不是最好的解决方法，但它有效！谁能告诉我为什么我不能使用 .find() 来搜索 div id ？

于 2013-05-17T12:58:40.413 回答