Добавить Javascript Onclick в.css файл

Question

Интересно, сможет ли кто-нибудь помочь мне, пожалуйста.

Я использую эту страницу, чтобы пользователи могли просматривать галерею своих изображений.

Вы можете видеть, что я добавил крест внизу каждого изображения, которое я буду использовать для удаления изображения, и это установлено в моем .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, чтобы удалить изображение, которое находится на моей странице галереи.

Мне просто интересно, сможет ли кто-нибудь дать какое-то руководство о том, как мне решить эту проблему.

Спасибо и всего наилучшего

Answer 1

Вам нужно добавить элемент (например, span), который может обрабатывать щелчок. Я вижу, что у вас уже есть что-то вроде этого:

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

Answer 2

Если вы установите эту таблицу стилей с помощью <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;
        }

Answer 3

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()
})