的onclick警报jQuery文档的JavaScript

Question

我有一个页面，到目前为止有：

<div id="x1">Text paragraph 1<link here></div> 
<div id="x2">Text paragraph 2<link here></div> 
<div id="x3">Text paragraph 3<link here></div> 

哪里此处链接就像是

<a href="google.com">google</a> 

我所试图做的就是添加一个链接到每一个底部这样当它被点击时，它会显示一个包含该文本块的div标识的警报。

因此，例如，如果有人点击文本段落2底部的链接，则他们将收到一条提示“x2”。

到目前为止，我只能想到一种方法，每个div中的每个链接都有一个onclick事件。但有100段，这可能会变得相当多，并且是混乱的代码。

像

$('#x1').onclick(function(){ 
alert('x1'); 
}); 

我怎样才能做得更好？

页面是PHP产生，所以我可以把DIV ID在该文本块区域的任何地方（甚至使一个新的div周围的链接，如果需要）...

编辑 - 许多很好的答案，我不知道该选哪个最好。我实际上最终使用Loongawas来达到我的目的，因为它很容易在php中为我的初学者水平做出贡献。因为他们使用高级功能

<div id='a1'>This text <a href="" onclick=tomato(1)>test</a> 
</div> 
<div id='a2'>This text <a href="" onclick=tomato(2)>test</a> 
</div> 
<div id='a3'>This text <a href="" onclick=tomato(3)>test</a> 
</div> 

和

function tomato(test){ 
alert(test); 
}; 

一些其他的都非常有趣。我将花一整天的时间来研究它们。谢谢大家。

Answer 1

你可以做一个javascript函数，它接受一个变量，然后通过号段的功能。如果该段是二号，你可以拨打

myfunction(2); 

或者是数字没有问题吗？

Answer 2

$('#x1, #x2, #x3').click(function(){ 
    alert($(this).parents().attr("id")); 
}); 

编辑：

更好的版本：

HTML: 
<div class="x">Text paragraph 1<link here></div> 
<div class="x">Text paragraph 2<link here></div> 
<div class="x">Text paragraph 3<link here></div> 

$('.x a').click(function(){ 
    alert($(this).parents().attr("id")); 
}); 

Answer 3

你有没有考虑使用一个类来命名他们所有，而不是明确的id？

<div class="x">Text paragraph 1<link here></div> 
<div class="x">Text paragraph 2<link here></div> 
<div class="x">Text paragraph 3<link here></div> 

那么你可以使用一个单一的点击事件为他们所有？

$(".x a").click() 
{ 
    //Use $(this) to refer to the clicked item. 
    alert($(this).parents().attr("id"));  
}); 

Answer 4

$('.myDivs').click(function(){ 
    alert($(this).parent().attr("id")); 
}); 

，或选择其他方式的div：

$('#x1').parent().children('div').click(...); 

Answer 5

东西沿着这些路线应该工作：

<div id="x1">Text paragraph 1 <a href='google.com'>google.com</a></div> 
<div id="x2">Text paragraph 2 <a href='google.com'>google.com</a></div> 
<div id="x3">Text paragraph 3 <a href='google.com'>google.com</a></div> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script> 
<script> 
    $('a').click(function() { 
    alert($(this).parent().attr('id')) 
    return false 
    }) 
</script> 

Answer 6

添加一个类来每个格，这样你就可以EM同时选择所有”的。

<div id="x1" class="x">Text paragraph 1 <a>Click</a></div> 
<div id="x2" class="x">Text paragraph 2 <a>Click</a></div> 
<div id="x3" class="x">Text paragraph 3 <a>Click</a></div> 

然后，你可以这样做：

$('div.x a').live('click', function(e){ 
    e.preventDefault(); 
    alert($(this).closest('div.x').attr('id')); 
}); 

http://jsfiddle.net/VGh3X/1/

Answer 7

一种更好的方法来这是为了让所有的可点击区域共享共同的东西，你可以作为选择使用。例如，如果所有可点击的div都有class='click'，则可以使用$('.click')将其全部选中并将其绑定到该选项。

$('.click a').bind('click', function() { 
    var div = this.closest('.click'); 
    alert(div.attr('id')); 
    return false; 
}); 

Answer 8

使用jQuery的现场或委托功能：

$('div a').live('click', function(ev){ 
    alert($(this).closest('div').attr('id')); 
}); 

到直播/委托功能的好处是，居然还有整个页面上这只是一个单一的事件（相对于每一个事件链接）。如果您动态添加更多链接，这仍然可以工作，无需附加更多事件。

实况和委托的区别在于委托对于页面的一部分是特定的。如果，例如，你包裹都在另一个DIV这些div的，调用看起来像：

$('#wrapperDiv').delegate('a', 'click', function(ev){ ... 

到这样做的好处是，看它检查内部的jQuery代码，如果点击选择只匹配运行在#wrapperDiv内点击，而不是点击页面上的任何位置。

Answer 9

$(document).ready(function() { 
     var links = $("div[id^='x'] a"); //get the a tags 
     $.each(links, function(i,v) { 
      $(v).click(function() { //bind on click 
       alert(v.parentNode.id); //alert div id 
       return false; // stop 
      }); 
     }); 
    });