Question

嗨，我只是学了一点jquery 我有一个html代码

<a class="num" href="#" data="number1"> number1 </a>
<a class="num" href="#" data="number2"> number2 </a>
<a class="num" href="#" data="number3"> number3 </a>
<a class="num" href="#" data="number4"> number4 </a>
<a class="num" href="#" data="number5"> number5 </a>

如果我单击第三项，如何从第三项中获取数据？我已经做了这样的事情：

$('.num').click(function(){
  var datas = $('.num').attr('data');
  alert(datas)
})

即使我单击了第4或第5个项目，它也会保持警报“ number1”？我的代码有什么问题吗？

Answer 1

您必须使用this来引用当前点击的链接

$('.num').click(function(){
  var datas = $(this).attr('data');
  alert(datas)
})

工作摘要

$('.num').click(function(){
  var datas = $(this).attr('data');
  alert(datas)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="num" href="#" data="number1"> number1 </a><br>
<a class="num" href="#" data="number2"> number2 </a><br>
<a class="num" href="#" data="number3"> number3 </a><br>
<a class="num" href="#" data="number4"> number4 </a><br>
<a class="num" href="#" data="number5"> number5 </a>

Answer 2

您应该引用this来引用单击的<a>-然后，您可以访问其data属性：

$('.num').click(function() {
  console.log(
    $(this).attr('data')
  );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="num" href="#" data="number1"> number1 </a>
<a class="num" href="#" data="number2"> number2 </a>
<a class="num" href="#" data="number3"> number3 </a>
<a class="num" href="#" data="number4"> number4 </a>
<a class="num" href="#" data="number5"> number5 </a>

获取多个相同类名jquery的特定数据

2 个答案: