JavaScriptをOnclickに追加する.cssファイル

Question

私は誰かが私を助けることができるかもしれないかと思います。

私は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コマンドにリンクして、ギャラリーページにある画像を削除する方法がわかりません。

私は、誰かがこの問題をどのように克服できるかについていくつかのガイダンスを提供することができるかもしれないかどうかを疑問に思っただけです。

おかげに関しては

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

Answer 2

CSSはスタイリング用ですが、JSは動作用です。この2つを混在させることはできず、両方とも機能面で関連性がありません。必要なものは、イメージを削除する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() 
}) 

Answer 3

あなたは<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; 
     }