javascript 单击列表元素以获取警报

nwo49xxi  于 2022-12-25  发布在  Java
关注(0)|答案(4)|浏览(117)

假设我有一个链接列表:

<a id="home" href="#"> home link </a><br/>
<a id="list1" href="#"> some text1 </a><br/> 
<a id="list2" href="#"> some text2 </a><br/> 
<a id="list3"> href="#"> some text3 </a><br/> 
<a id="list4" href="#"> some text4 </a><br/
<a id="list5" href="#"> some text5 </a><br/>
<a id="list sails" href="#"> sails link </a><br/>

如果某个列表链接被点击,我会收到一个带有文本的警报。
我写了一个脚本,但它是不正确的,它看起来像这样:

function lunch(){
  alert( $(this).text()) }

<a id="listn" href="#" onclick="lunch()"> some text5 </a><br/>

如何在jQuery或JavaScript中实现这一点?

ddarikpa

ddarikpa1#

$('a[id^=list]').click(function () {
    alert($(this).text());
});

这将适用于ID以“list”开头的所有链接。如果您希望它适用于所有链接,请将选择器更改为$('a')

b09cbbtk

b09cbbtk2#

您应该将节点示例传递给lunch函数。

< a id="listn" href="#" onclick="lunch(this)"> some text5 < /a>

以此作为论据

function lunch(node){ alert( $(node).text()) }
nlejzf6q

nlejzf6q3#

请执行以下操作:

<div id="links">
<a id="home" href="#">home link</a>
<a id="list1" class="list" href="#">some text1</a>
<a id="list2" class="list" href="#">some text2</a>
<a id="list3" class="list" href="#">some text3</a>
<a id="list4" class="list" href="#">some text4</a>
<a id="list5" class="list" href="#">some text5</a>
</div>

与:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#links a").click(function() {
    alert(this.id);
    return false;
  });
});
</script>

或者将其限制为仅列表链接:

$("a.list").click(function() {
  alert(this.id);
  return false;
});

你会注意到我在里面放了一个类而不是使用属性选择器,这通常是不建议的,而且,根据Unobtrusive JavaScript的原则,你应该用这种方式添加你的事件处理程序,而不是使用onclick属性。

v1uwarro

v1uwarro4#

最好的办法是给予每个人一个类,例如

$(function()
{
    $('.lunchable').click(function()
    {
        alert($(this).text());
    });
});

相关问题