获取数据ID“未定义”

Question

I used floatingMenu and I want get ID numbers with Data-id but I can not get the ID number of the buttons

Output:

example.com/?id=undefined

Why am I getting this error?

 var myDiv = document.querySelector('.designer-actions'); $.floatingMenu({ selector: '.designer-actions a[data-action="show-actions-menu"]', items: [{ title: 'Open', action: 'https://example.com/?id=' + myDiv.dataset.idNo }, ] }); 

 ul.floating-menu { position: absolute; background-color: #000; border-radius: 4px } ul.floating-menu[data-fm-floated="top"]:before { content: ""; position: absolute; width: 0; height: 0; bottom: -9px; left: 50%; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #000 } ul.floating-menu[data-fm-floated="left"]:before { content: ""; position: absolute; width: 0; height: 0; bottom: 50%; margin-bottom: -9px; right: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 9px solid #000 } ul.floating-menu[data-fm-floated="right"]:before { content: ""; position: absolute; width: 0; height: 0; bottom: 50%; margin-bottom: -9px; left: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid #000 } ul.floating-menu[data-fm-floated="bottom"]:before { content: ""; position: absolute; width: 0; height: 0; top: -9px; left: 50%; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #000 } ul.floating-menu li { position: relative; float: left; height: 100% } ul.floating-menu li a { position: relative; float: left; color: #fff; font-size: 13px; padding: 4px 12px; text-decoration: none; line-height: 32px } ul.floating-menu li .fm-icon { position: relative; float: left; margin-right: 8px; font-size: 24px; line-height: 32px; color: #fff } ul.floating-menu.animated { animation-duration: 0.2s; -webkit-animation-duration: 0.2s; -ms-animation-duration: 0.2s; -moz-animation-duration: 0.2s; -o-animation-duration: 0.2s } ul.floating-menu.visible-transit { -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; -webkit-transition: .2s; transition: .2s } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } [data-fm-floated="left"].fadeInPosition { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } [data-fm-floated="right"].fadeInPosition { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } [data-fm-floated="top"].fadeInPosition { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } [data-fm-floated="bottom"].fadeInPosition { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://test3.moverals.com/mdm/floating-menu.js"></script> <div id='designer-actions' class='designer-actions'> <a class='icon ion-ios-more' data-idNo='1' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button1</a> <a class='icon ion-ios-more' data-idNo='2' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button2</a> </div> 

JSFiddle

Answer 1

Updated answer:

You need to loop through the array:

$('.designer-actions a').each(function(){
  idNo = $(this).data('idno');
  $.floatingMenu({
      selector: '.designer-actions a[data-action="show-actions-menu"]',
      items: [{
        title: 'Open',
        action: 'https://example.com/?id=' + idNo
      }, ]
  });
});