1つのクリックボタンで同じ属性名で異なるデータ値をプルすることはできますか？

Question

1つのクリックボタンで同じ属性名から別のデータ値を引き出せるようにしたい。これはJqueryで可能ですか？だから私がbuttomをクリックすると "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のデータ属性が作成したターゲットdivに追加されます。私は未定義に対処するコードを更新しました。

$(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>"); 
 
    }); 
 

 

 
});

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