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，但是我会在您的 div 中添加一个spanorlabel并给它一个类/ID：

<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

将 Span 与类文本一起使用是否不可行

使用此代码

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

（通过电话发布的答案，未经测试的代码。帖子将在电脑上进行一次拼写检查）

于 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 回答
1

好吧，如果我正确理解了您要执行的操作，则需要执行以下操作：

html

<div>
    <span class="click">This are letters</span>
    <em>and this are not.</em> 
    Hello again!
</div>

jQuery：

$('.click').on('click', function(){
    alert($(this).html()):
});

这只是一个非常简单的例子，但它可以帮助你

于 2013-02-18T13:00:16.160 回答