6

私はいくつかのDIVを持っています。これらの DIV 内には、いくつかのテキスト、画像、タグがあります...テキストがクリックされたときに「アラート」を表示する必要があります。画像でも、他のタグでも、他のタグ内のテキストでもなく、DIV 内のテキストだけです。jQuery でそれを行う方法は?

jsFiddle の例。

HTML

<div style="background-color:PapayaWhip;">Some text. 
 <img src="http://ynternet.sk/test2/close_1.jpg" /> 
 <img src="http://ynternet.sk/test2/close_2.jpg" /> 
</div> 
<div style="background-color:Moccasin;">This are letters 
 <em>and this are not.</em> 
 Hello again!
</div> 
<div style="background-color:LightGoldenRodYellow;">
 <img src="http://ynternet.sk/test2/close_1.jpg" />
 <img src="http://ynternet.sk/test2/close_2.jpg" />
 Letters in new line.
 <img src="http://ynternet.sk/test2/close_1.jpg" />
 <img src="http://ynternet.sk/test2/close_2.jpg" /> 
</div> 
<div style="background-color:Wheat;">New letters in another line.</div>

CSS

div {
  padding:10px 0px 0px 20px;
  font-family:Verdana;
  height:40px;
}
em{
  color:red;
}
4

6 に答える 6

8

div の場合、ソースのタイプを確認してください。これは、div によって直接ラップされるテキストであることを意味します。のようなモードタグを含めたい場合emは、それらを条件に追加できます。

ライブデモ

$('div').click(function(evt){  
    if(evt.target.tagName == 'DIV')
        alert("div clicked");
});
于 2013-02-18T12:54:14.230 に答える
5

jQuery マジックを使用して の子を調べることもできますが、div 内にordivを追加してクラス/ID を指定します。spanlabel

<span class="letters">
  Letters in new line
</span>

$(".letters").click(function() {
    alert('Clicked');
});

http://jsfiddle.net/meNJu/

提供されているフィドルはchildren()、上記の方法と同様に使用する方法を示しています。

http://jsfiddle.net/meNJu/1/

ID ではなくクラスを使用したデモンストレーション。

于 2013-02-18T12:53:24.997 に答える
1

div のすべての子からのイベントの伝播を停止できます。

$('div').click(function (event) {
    alert('Text');
});
$('div').children().click(function (event) {
    event.stopPropagation();
});

フィドルを更新しました。

于 2013-02-18T12:52:13.350 に答える
1

クラステキストでスパンを使用することは実行可能ではないでしょうか

このコードで

$(".text").click(function() {
 alert("Handler for click() called.");
});

（電話から投稿された回答、テストされていないコード。投稿はPCで一度スペルチェックされます）

于 2013-02-18T12:58:58.473 に答える
1

これは非常に簡単です:

$('div').click(function (e) {

    if ($(this).children().length === 0) {
        // do something
        alert($(this).text());
    }
});

$('div').children().click(function (event) {
    event.stopPropagation();
});

デモ

于 2013-02-18T12:59:10.887 に答える