3

簡潔にするために短縮された、次のようなアイテムの順序付けられていないリストがあります。

<div id="elementsContainer">
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
  </ul>
</div>

リストのスタイルを設定しましたが、これらの 3 つのスタイルはリスト アイテムの背景画像を処理します。

#elementsContainer ul li {
    list-style:none;
}
#elementsContainer a {
    background: transparent url(/images/icons/bullet_delete.png) no-repeat 5px 50%;
}

#elementsContainer a:hover,
#elementsContainer a:focus,
#elementsContainer a:active {
    background:#fff url(/images/icons/delete.png) no-repeat 5px 50%;
}

リストは見栄えがよく、各リスト項目のテキストの左側に小さな削除アイコンが表示されます。ただし、jQuery (1.3) を使用して各アイテムのクリック イベントを処理しようとしています。リスト アイテムの背景画像とリスト アイテムのテキストの間で個別の機能が必要です。画像をクリックすると、アイテムを削除したいです。テキストをクリックすると、アイテムを編集したい。

私はこのようなものを使い始めました：

$("a").live("click", function(event){
  alert( $(this).text() );
});

しかし、テキストまたは画像をクリックしているかどうかを判断できる $(this) または "event" には何も表示されません。

はい、別の「img」タグを付けて、そのクリックを個別に処理できることはわかっています。それが唯一の選択肢である場合、私はその道を進みます。背景画像で機能させる方法があるかどうか知りたいだけです。

前もって感謝します！

4

4 に答える 4

7

IMGタグでどうぞ。LI 要素自体のクリックを検出することができる最善の方法です。IMG タグ (および、セマンティックの良さと適切に劣化したページのための A タグでさえも) が最適に機能します。

LI 内で IMG を使用して同じように見えるようにスタイリングするのにそれほど問題はないはずです。私はアイコンの削除/編集が必要なリスト内で常に同様のことを行っています。

于 2009-02-25T18:14:13.363 に答える
2

DOM に関する限り、実際には存在しないため、背景画像のクリックを区別することはできません。あなたが持っているのはa要素自体 (たまたま背景画像とともに表示される) だけであり、その onclick ハンドラーは、テキストかどうかに関係なく、タグ内の任意の場所をクリックする限り起動します。

img記事で結論付けたように、タグ (または他の別のタグ) を使用して、そのクリックを個別に処理するのがおそらく最善です。

于 2009-02-25T18:15:03.813 に答える
1

目的の効果を得るためにできることは、削除イメージが最終的に表示される領域にいくつかのスペースを含むスパンを配置し、そのスパンのクリックにイベントをフックすることです。

于 2009-02-25T18:25:01.450 に答える
0

その上に要素を置き、それでイベントを登録します。

于 2014-07-25T03:32:15.170 に答える