onclick警报jquery html 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 id的警告。

例如，如果有人点击文本第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

使用jQuery的活动或委托函数：

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

活动/委托函数的好处是，实际上整个页面上只有一个事件(而不是每个链接一个事件)。如果动态添加更多链接，这仍然有效，而不必附加更多事件。

活动和委托之间的区别是委托特定于页面的某个部分。例如，如果将所有这些div包装在另一个div中，则调用如下所示：

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

这样做的好处是，内部jQuery代码检查该单击是否与选择器匹配，该代码只运行于#wrapperDiv内部的单击，而不是页面上任何位置的单击。

Answer 3

$('#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"));
});