將Javascript添加到.css文件

我正在使用this頁面，允許用戶查看他們的圖像庫。

你可以看到，我在每一個我會用刪除的圖像圖像底部增加了一個十字架，這是建立在我的.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命令刪除我的畫廊頁面上的圖像。

我只是想知道是否有人能夠提供一些指導我如何可以克服這個問題。

感謝和問候

來源

2012-05-07 IRHM

您需要添加一個可處理點擊的元素（例如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; 
}

來源

2012-05-07 11:05:55 Armatus

非常感謝您抽出寶貴回覆和解決方案的時間。有一些小調整可以做，因爲我試圖讓這個圖標處於「底部中間」，但它很有用。親切的問候 – IRHM

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-07 11:06:34 Joseph

感謝您花時間回覆我的文章和解決方案。我想這是你們三個人的問題。你們都向我提供了很多不同的解決方案。但是我對JavaScript和相關編碼確實很陌生。從初學者的角度來看，您如何知道使用哪種解決方案？這是否只是個人喜好？親切的問候 – IRHM

如果設置了這個上面樣式表在<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-07 11:19:07

嗨@阿倫，非常感謝您抽出寶貴時間回覆我的文章以及有益的解決方案。親切的問候 – IRHM

爲什麼要創建一個表來添加一個監聽器？ – Gary

我創建它將更多按鈕放置在適當的位置。如果你有什麼更好的想法，與我分享夥計... –

將Javascript添加到.css文件

回答

相關問題