onclick警报jquery html javascript

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

<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>

我怎样才能做得更好

该页面是用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>

其他一些函数非常有趣，因为它们使用更高的函数。我要花一整天的时间来调查他们。谢谢大家

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

HTML：
案文第1段
案文第2段
案文第3段
$（'.x a'）。单击（函数（）{
警报（$（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"));
});

HTML：
案文第1段
案文第2段
案文第3段
$（'.x a'）。单击（函数（）{
警报（$（this.parents（）.attr（“id”））；
});

您是否考虑过使用类来命名它们，而不是显式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>

---

您是否考虑过使用类来命名它们，而不是显式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>

或者以其他方式选择div：

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

或者以其他方式选择div：

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

---

您可以创建一个javascript函数，该函数接受一个变量，然后将段落号传递给该函数。如果是第二段，你可以打电话

myfunction(2);

---

或者数字不是问题所在？

您可以创建一个javascript函数，该函数接受一个变量，然后将段落编号传递给该函数。如果是第二段，你可以打电话

myfunction(2);

---

或者数字不是问题吗？

以下几点应该可以：

<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>

文本第1段
案文第2段
案文第3段
$（'a'）。单击（函数（）{
警报（$（this.parent（）.attr（'id'））
返回错误
})

按照这些思路应该可以做到：

<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>

文本第1段
案文第2段
案文第3段
$（'a'）。单击（函数（）{
警报（$（this.parent（）.attr（'id'））
返回错误
})

为每个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>

---

为每个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>

---

更好的方法是让所有可点击区域共享一些共同点，您可以将其用作选择器。例如，如果所有可单击的div都有

class='click'

，则可以使用

$（'.click'）

选择它们并绑定到该div

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

---

更好的方法是让所有可点击区域共享一些您可以用作选择器的共同点。例如，如果所有可单击的div都有

class='click'

，则可以使用

$（'.click'）

选择它们并绑定到该div

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

---

使用jQuery的live或delegate函数：

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

live/delegate函数的好处是，整个页面上实际上只有一个事件（而不是每个链接一个事件）。如果动态添加更多链接，这仍然有效，而无需附加更多事件

live和delegate之间的区别在于delegate特定于页面的一部分。例如，如果您将所有这些div包装到另一个div中，则调用将如下所示：

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

---

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

使用jQuery的live或delegate函数：

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

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

live/delegate函数的好处是，整个页面上实际上只有一个事件（而不是每个链接一个事件）。如果动态添加更多链接，这仍然有效，而无需附加更多事件

live和delegate之间的区别在于delegate特定于页面的一部分。例如，如果您将所有这些div包装到另一个div中，则调用将如下所示：

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

---

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

我简直不敢相信我没有想到这一点！谢谢。没问题：）有时候最简单的事情最容易错过。真不敢相信我居然没想到这个！谢谢。没问题：）有时候最简单的事情最容易错过。

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