Question

我知道问题不是那么容易理解，也可能是重复但我找不到问题的具体解决方案，所以请允许我详细说明。

我在文章缩略图中使用引导程序显示大量图像我正在使用PHP从数据库中获取值我正在使用foreach循环并动态添加元素这是一个片段：

foreach ($cursor as $document) 
{
  foreach ($document["Pics"] as $photos) 
  {
    echo "<article id='hasMenu' class='development design'>
      <a href=".$photos["Photo"])." class='swipebox'>
        <img  src=".$photos["Photo"]." class='work img-responsive'>
      </a>
    </article>";
  }
}

此代码从数据库中提取所有图像并将其显示在我的页面上

现在这是添加部分我在删除特定图像时遇到问题。我正在使用右键单击上下文菜单，但我无法获取我想删除的特定元素，因为没有id或类名，因为我不知道将添加多少图像....

这是我的上下文菜单片段：

$(function() {
  $.contextMenu({
    selector: "#hasMenu",
    callback: function(key, options) {
      if (key == "delete") {
        var m = "clicked: " + key;
        window.console && console.log(m) || alert(m);
      }

      if (key == "open") {
        var m = "clicked: " + key;
        window.console && console.log(m) || alert(m);
      }
    },
    items: {
      "open": {
        name: "Open", 
        icon: "edit"
      },
      "delete": {
        name: "Delete", 
        icon: "delete"
      },
    }
  });

  $('.context-menu-one').on('click', function(e) {
    console.log('clicked ', e);
  })
});

通过这个我添加一个右键单击上下文菜单，显示删除和打开选项。

现在，当我点击删除时，我想获取我要删除的特定图片（文章）的ID ...

我希望我的问题陈述清楚......

Answer 1

首先，您的PHP循环生成了许多HTML元素，这些元素都具有相同的id hasMenu，这是无效的。你应该把它改成一个班级。

然后，您可以将上下文菜单插件附加到该类的元素。最后，您可以在按钮上放置的每个回调函数中使用this关键字来引用触发菜单首先显示的元素。试试这个：

$.contextMenu({
  selector: ".hasMenu",
  items: {
    "open": {
      name: "Open",
      icon: "edit",
      callback: function(key, opt) {
        $(this).find('span').show();
      }
    },
    "delete": {
      name: "Delete",
      icon: "delete",
      callback: function(key, opt) {
        $(this).remove();
      }
    },
  }
});

.hasMenu span { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.5/jquery.contextMenu.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.5/jquery.contextMenu.min.css" />

<div class="hasMenu">Right click me... #1 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #2 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #3 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #4 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #5 <span>Opened content...</span></div>

如何专门删除动态添加的元素？

1 个答案: