onclick 警报 jquery html javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5383068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick alert jquery html javascript
提问by David19801
I have a page so far with:
到目前为止，我有一个页面：
<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>
Where link here is like
这里的链接就像
<a href="google.com">google</a>
What I am trying to do is add a link to the bottom of each paragraph of text so that when it is clicked it displays an alert with the div id of that text block.
我想要做的是在每个文本段落的底部添加一个链接，以便在单击它时显示带有该文本块的 div id 的警报。
So for example, if someone clicks on the link at the bottom of text paragraph 2, then they will get an alert saying "x2".
因此，例如，如果有人点击文本第 2 段底部的链接，那么他们将收到一条提示“x2”。
So far, I have only been able to think of a way involving an onclick event for each link in each div. But with 100 paragraphs this could become quite a lot and is messy code.
到目前为止，我只能想到一种方法，为每个 div 中的每个链接都添加一个 onclick 事件。但是对于 100 个段落，这可能会变得非常多并且是混乱的代码。
like
喜欢
$('#x1').onclick(function(){
alert('x1');
});
How can I do this better?
我怎样才能做得更好？
The page is generated with php so I could put the div id's anywhere in that text block area (even make a new div around the link if required)...
该页面是用 php 生成的，因此我可以将 div id 放在该文本块区域的任何位置（如果需要，甚至可以在链接周围创建一个新的 div）...
EDIT- Many good answers, I don't know which to pick as best. I actually ended up using Loongawas for my purpose as its easy to make for my beginner level in php.
编辑- 许多好的答案，我不知道该选择哪个最好。实际上，我最终使用 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>
and
和
function tomato(test){
alert(test);
};
Some of the others are incredibly interesting as they use higher functions. I'm going to spend the rest of the day looking into them. Thanks to all.
其他一些非常有趣，因为它们使用更高的功能。我将用剩下的一天时间研究它们。谢谢大家。
采纳答案by Loogawa
You could make a javascript function that takes a variable and then pass the paragraph number to the function. If the paragraph was number two you could call
您可以创建一个 javascript 函数，该函数接受一个变量，然后将段落编号传递给该函数。如果段落是第二个，你可以打电话
myfunction(2);
or is the number not the problem?
还是号码不是问题？
回答by Mark Kahn
use jQuery's live or delegate functions:
使用 jQuery 的 live 或 delegate 函数：
$('div a').live('click', function(ev){
alert($(this).closest('div').attr('id'));
});
The benefit to the live/delegate functions is that there's actually only a single event on the entire page for this (as opposed to one event per link). If you add more links dynamically, this still works without having to attach more events.
live/delegate 函数的好处是，实际上整个页面上只有一个事件（而不是每个链接一个事件）。如果您动态添加更多链接，这仍然有效，而无需附加更多事件。
The difference between live and delegate is that delegate is specific to a part of the page. If, for instance, you wrapped all of these DIVs in another div, the call would look like:
live 和delegate 之间的区别在于delegate 特定于页面的一部分。例如，如果您将所有这些 DIV 包装在另一个 div 中，则调用将如下所示：
$('#wrapperDiv').delegate('a', 'click', function(ev){ ...
The advantage to this is that the internal jQuery code that checks to see if the click matches the selector only runs on clicks inside of #wrapperDiv instead of clicks anywhere on the page.
这样做的好处是，检查点击是否与选择器匹配的内部 jQuery 代码仅在 #wrapperDiv 内部的点击上运行，而不是在页面上的任何地方点击。
回答by danniel
$(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
});
});
});
回答by mattsven
$('#x1, #x2, #x3').click(function(){
alert($(this).parents().attr("id"));
});
EDIT:
编辑：
Better version:
更好的版本：
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"));
});
回答by Rion Williams
Have you considered using a class to name them all as opposed to explicit ids?
您是否考虑过使用一个类来命名它们而不是显式 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>
so then you would be able to use a single click event for all of them?
那么您就可以对所有这些都使用单击事件吗？
$(".x a").click()
{
//Use $(this) to refer to the clicked item.
alert($(this).parents().attr("id"));
});
回答by paztulio
$('.myDivs').click(function(){
alert($(this).parent().attr("id"));
});
Or select the divs in some other way:
或者以其他方式选择 div：
$('#x1').parent().children('div').click(...);
回答by Jesse Aldridge
Something along these lines should work:
沿着这些路线的东西应该工作：
<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>
回答by Rocket Hazmat
Add a class to each div, so you can select all of 'em at once.
为每个 div 添加一个类，以便您可以一次选择所有 div。
<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>
Then you can do:
然后你可以这样做：
$('div.x a').live('click', function(e){
e.preventDefault();
alert($(this).closest('div.x').attr('id'));
});
回答by Michael McTiernan
A better approach to this is to make all of the clickable areas share something in common that you can use as a selector. For example, if all of the clickable divs had class='click', you'd be able to select them all using $('.click')and bind to that.
一个更好的方法是让所有可点击区域共享一些可以用作选择器的共同点。例如，如果所有可点击的 div 都有class='click'，您就可以使用$('.click')并绑定到所有div来选择它们。
$('.click a').bind('click', function() {
var div = this.closest('.click');
alert(div.attr('id'));
return false;
});
