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 fileJavascriptコマンドでリンクして、ギャラリーページにある画像を削除する方法がよくわからないことです。

この問題を克服するために私がどのように取り組むことができるかについて誰かがいくつかのガイダンスを提供できるかどうか疑問に思いました。

ありがとう、よろしく

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

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

jQuery1.7以降のバージョンは次のとおりです。

$('.galleria-thumbnails').on('click','.btn-delete',function(){
    $(this).closest('.galleria-image').remove()
})
于 2012-05-07T11:06:34.747 に答える
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 に答える