0

我想知道是否有人可以帮助我。

我正在使用这个页面来允许用户查看他们的图片库。

您可以看到我在每个图像的底部添加了一个叉号，我将使用它来删除该图像，这在我的.css文件中设置为：

 .galleria-thumbnails .galleria-image {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 7px 7px 0;
    border: 2px solid #fff;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
    padding-bottom: 20px;
    background-color:#FFFFFF;

我遇到的问题是我非常不确定如何将单独的图像.ccs file与 Javascript 命令链接以删除我的画廊页面上的图像。

我只是想知道是否有人能够就我如何克服这个问题提供一些指导。

谢谢并恭祝安康

4

3 回答 3

1

您需要添加一个可以处理点击的元素（例如跨度）。我可以看到你实际上已经有了这样的东西：

<span class="btn-delete icon-remove icon-white"></span>

你甚至已经有了点击处理程序：

$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src")); return false; });

您需要做的就是应用样式，以便您可以实际使用它。就像是：

.galleria-thumbnails .btn-delete {
    display: block; /* Or just use a div instead of a span*/
    position: absolute;
    bottom: 0px; /*align at the bottom*/
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
}
于 2012-05-07T11:05:55.317 回答
0

<td>如果您在只写 onclick 事件中设置上面的样式表...

这里有一个样本

<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>

这是我的CSS

 .menubuttonhome
        {
            background-image: url('Images/homebutton.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: #005a8c;
            font-family: Arial;
            padding-top:11px;
            font-size: 10pt;
            font-weight: 500;
        }
于 2012-05-07T11:19:07.317 回答
0

CSS 用于样式，而 JS 用于行为。您不能将两者混为一谈，而且两者在功能上都没有关系。您需要的是一个删除图像的 JS。

符合标准的 JS 版本

var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
    dbLength = db.length,
    i;

for(i=0;i<dbLength;i++){
     db[i].addEventListener('click',function(){
        var thumbnail = this.parentNode;
        thumbnail.parentNode.removeChild(thumbnail);
    },false);
}

一个 jQuery 1.7+ 版本是这样的：

$('.galleria-thumbnails').on('click','.btn-delete',function(){
    $(this).closest('.galleria-image').remove()
})
于 2012-05-07T11:06:34.747 回答