Question

我希望只需点击一下按钮即可从同一属性名称中提取不同的数据值。这可能与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>

Answer 1

我使用jquery创建了解决方案。每次单击时，div中的data属性将附加到我创建的目标div。我已经更新了代码来处理undefined。

＆＃13;

$(function() {

  var $dataDivs = $('div.analytic-product');
  var $target = $('#target');
  var indexTracker = 0;


  $('.btn.more-info').on('click', function(e) {    
    if (indexTracker < $dataDivs.length)
      $target.append($($dataDivs[indexTracker++]).data('prodname') + "<br>");
  });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
<div id="target"></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>

＆＃13;

我可以只使用一个单击按钮来提取具有相同属性名称的不同数据值吗？

1 个答案: