javascript - 弹出消息不会出现在克隆的对象旁边

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