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作为我的目的，因为它很容易为我的初学者级别制作。

<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

使用jQuery的实时或委托功能：

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

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

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

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

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

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

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

myfunction(2);

或者数字不是问题？

Answer 6

这些方面应该有效：

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

为每个div添加一个类，因此您可以一次选择所有'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 8

更好的方法是让所有可点击区域共享一些可用作选择器的共同点。例如，如果所有可点击的div都有class='click'，您就可以使用$('.click')选择它们并绑定到它。

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

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

onclick alert jquery html javascript

9 个答案: