Javascript 我可以只需单击一个按钮，就可以使用相同的属性名称提取不同的数据值吗？

我希望只需单击一个按钮，就可以从相同的属性名称中提取不同的数据值。使用Jquery可以做到这一点吗？所以，如果我点击按钮，它会显示我“01”，如果我再次点击，它会显示我“02”，依此类推。这是我的密码：

<script>
$(document).ready(function(){
   $(".more-info").click(function(){
   var getData = document.getElementsByClassName("showTitle");
   document.getElementById("gridModalLabel").innerHTML =
   $(".showtitle").data('prodname');
});


   });

</script>

 <div class="analytic-product showtitle" data-prodname="01" id="w3s"></div>
 <div class="analytic-product showtitle" data-prodname="02" id="w3s"></div>
 <div class="analytic-product showtitle" data-prodname="03" id="w3s"></div>

 <h4 class="modal-title" data-target="#gridSystemModal" id="gridModalLabel"></h4>
 <button class='btn btn-default btn-lg more-info' data-target='#gridSystemModal' data-toggle='modal' type='button'>Schedule Meeting</button>

$（文档）.ready（函数（）{
$（“.more info”）。单击（函数（）{
var getData=document.getElementsByClassName（“showTitle”）；
document.getElementById（“gridModalLabel”）.innerHTML=
$（“.showtitle”）.data（'prodname'）；
});
});
计划会议

我已经使用jquery创建了解决方案。每次单击时，“来自div的数据”属性都会附加到我创建的目标div中。我已经更新了代码来处理未定义的问题

$（函数（）{
var$dataDivs=$（'div.analysis-product'）；
var$target=$（“#target”）；
var indexTracker=0；
$（'.btn.more info'）。在（'click'，函数（e）{
if（indexTracker<$dataDivs.length）
$target.append（$（$dataDivs[indexTracker++]）.data（'prodname'）+“
”）；
});
});

计划会议
为什么要混合使用jquery和vanilla javascript？当你已经是最后一个了，会发生什么？请花点时间仔细阅读，这是可能的，但您需要跟踪全局单击的内容，然后检查返回的值。@Isaac，这不是普通的javascript。值得一提的是，jQuery是普通的JavaScript。这是一个由没有人愿意承担责任的代码上的有机层组成的大杂烩。原始版本可能在四年前从互联网上被盗。@FrédéricHamidi
document.getElementById（“gridModalLabel”）
是香草，
$（document）。ready
不是。请使用
eq（）
而不是创建新的jQuery对象……注意，如果继续单击将显示“未定义”的否决投票原因，请注意？答案不解决预期的问题吗？不管怎样，我想知道为什么答案被否决了。@Danny这就是你想要的吗？如果是，那么你可以接受答案。如果没有，让我知道我可能可以修改它。StackOverflow上的一些用户的问题是，他们喜欢炫耀自己的智慧，而不是帮助新来者。记住，这里的每个人都不是专家！因此，请不要发表可以劝阻初学者再次发布问题的评论。谢谢