彈出消息不會出現在克隆對象旁邊

Question

我有一個包含3個可拖動對象和背景圖像的面板。我的JavaScript腳本（基於interact.js）允許在背景圖像上拖放對象。所有可拖動的對象也是可複製的。這意味着每次從面板拖動原始對象時，都會被克隆。

現在我想添加一個彈出功能：當我點擊一個對象時，應該會出現一個彈出消息。問題在於彈出消息出現在原始對象旁邊，但不是克隆的。我點擊一個對象旁邊的彈出消息（不包括原始消息）。我該怎麼做？這是爲了彈出窗口相關的片的JavaScript代碼：

function myFunction() { 
    var popup = document.getElementById("myPopup"); 
    popup.classList.toggle("show"); 
} 

整個代碼：

HTML（即屬於一類drag-base圓對象的一個​​例子）：

<div id="drag-base" class="popup draggable" onclick="myFunction()"> 
    <span class="popuptext" id="myPopup">A Simple Popup!</span> 
</div> 

CSS：

#drag-base { 
     background: #d9534f; 
     color: #000000; 
     width: 35px; 
     height: 35px; 
     border-radius: 50%; 
     text-align: center; 
     -webkit-transform: translate(0px, 0px); 
       transform: translate(0px, 0px); 
    } 

.dropzone { 
     background-color: #e9ebed; 
     padding: 10px; 
     width: 100%; 
     height: 600px; 
     overflow-y: scroll; 
     border: dashed 4px transparent; 
     float:left; 
    } 

    .drop-active { 
     border-color: #aaa; 
    } 

    .drop-target { 
     background-color: #3f5265; 
     color: #FFF; 
     border-color: #fff; 
     border-style: solid; 
    } 

    /* Popup container - can be anything you want */ 
    .popup { 
     position: relative; 
     display: inline-block; 
     cursor: pointer; 
     -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    } 

    /* The actual popup */ 
    .popup .popuptext { 
     visibility: hidden; 
     width: 160px; 
     background-color: #555; 
     color: #fff; 
     text-align: center; 
     border-radius: 6px; 
     padding: 8px 0; 
     position: absolute; 
     z-index: 1; 
     bottom: 125%; 
     left: 50%; 
     margin-left: -80px; 
    } 

    /* Popup arrow */ 
    .popup .popuptext::after { 
     content: ""; 
     position: absolute; 
     top: 100%; 
     left: 50%; 
     margin-left: -5px; 
     border-width: 5px; 
     border-style: solid; 
     border-color: #555 transparent transparent transparent; 
    } 

    /* Toggle this class - hide and show the popup */ 
    .popup .show { 
     visibility: visible; 
     -webkit-animation: fadeIn 1s; 
     animation: fadeIn 1s; 
    } 

    /* Add animation (fade in the popup) */ 
    @-webkit-keyframes fadeIn { 
     from {opacity: 0;} 
     to {opacity: 1;} 
    } 

    @keyframes fadeIn { 
     from {opacity: 0;} 
     to {opacity:1 ;} 
    } 

的JavaScript：

<script type="text/javascript"> 
    // target elements with the "draggable" class 
    interact('.draggable').draggable({ 
     inertia: true, 
     restrict: { 
      restriction: ".dropzone", 
      drag: document.getElementById('dropzone'), 
      endOnly: true, 
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 } 
     }, 
     autoScroll: true, 
     onmove: function (event) { 
      var target = event.target; 
      var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; 
      var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; 

      target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; 

      target.setAttribute('data-x', x); 
      target.setAttribute('data-y', y); 
     }, 
     onend: function(event) { 
      console.log(event); 
     } 
    }) 
    .on('move', function (event) { 
    var interaction = event.interaction; 
    if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') { 
     var original = event.currentTarget; 
     var clone = event.currentTarget.cloneNode(true); 
     var x = clone.offsetLeft; 
     var y = clone.offsetTop; 
     clone.setAttribute('clonable','false'); 
     clone.style.position = "absolute"; 
     clone.style.left = original.offsetLeft+"px"; 
     clone.style.top = original.offsetTop+"px"; 
     original.parentElement.appendChild(clone); 
     interaction.start({ name: 'drag' },event.interactable,clone); 
    } 
    }) 
    .resizable({ 
     edges: { left: true, right: true, bottom: true, top: true } 
    }) 
    .on('resizemove', function (event) { 
     var target = event.target; 
      x = (parseFloat(target.getAttribute('data-x')) || 0), 
      y = (parseFloat(target.getAttribute('data-y')) || 0); 

     // update the element's style 
     target.style.width = event.rect.width + 'px'; 
     target.style.height = event.rect.height + 'px'; 

     // translate when resizing from top or left edges 
     x += event.deltaRect.left; 
     y += event.deltaRect.top; 

     target.style.webkitTransform = target.style.transform = 
      'translate(' + x + 'px,' + y + 'px)'; 

     target.setAttribute('data-x', x); 
     target.setAttribute('data-y', y); 
     //target.textContent = event.rect.width + '×' + event.rect.height; 
     }); 

    // enable draggables to be dropped into this 
    interact('.dropzone').dropzone({ 
     // Require a 50% element overlap for a drop to be possible 
     overlap: 0.50, 

     // listen for drop related events: 

     ondropactivate: function (event) { 
     // add active dropzone feedback 
     event.target.classList.add('drop-active'); 
     }, 
     ondragenter: function (event) { 
     var draggableElement = event.relatedTarget, 
      dropzoneElement = event.target; 

     // feedback the possibility of a drop 
     dropzoneElement.classList.add('drop-target'); 
     }, 
     ondragleave: function (event) { 
     // remove the drop feedback style 
     event.target.classList.remove('drop-target'); 
     }, 
     ondrop: function (event) { 
     //event.relatedTarget.textContent = 'Dropped'; 
     }, 
     ondropdeactivate: function (event) { 
     // remove active dropzone feedback 
     event.target.classList.remove('drop-active'); 
     event.target.classList.remove('drop-target'); 
     } 
    }); 

    $(".dropzone").html("<img src='https://s-media-cache-ak0.pinimg.com/originals/fb/d5/55/fbd5556e0e364b31166bebfce433c14e.jpg'>"); 

    // When the user clicks on div, open the popup 
    function myFunction() { 
     var popup = document.getElementById("myPopup"); 
     popup.classList.toggle("show"); 
    } 

</script> 

Answer 1

使用類而不是ID，並使用DOM遍歷查找被點擊的元素中的彈出窗口。通過點擊的元素的功能：

<div id="drag-base" class="popup draggable" onclick="myFunction(this)"> 
    <span class="popuptext" id="myPopup">A Simple Popup!</span> 
</div> 

，然後使用該函數：

function myFunction(div) { 
    div.querySelector(".popuptext").classList.toggle("show"); 
}