时间戳

首页 > 解决方案 > 具有每个对象的特定数据的特定菜单

javascript - 具有每个对象的特定数据的特定菜单

问题描述

我正在尝试创建一个页面，您可以在其中创建具有特定属性的 div 的“文档”。现在我想到了name& color。

首先，当您单击正文时，您可以创建一个名为“something+i”（i 是其 ID）的文档，然后，当您单击特定文档时，您可以访问菜单来编辑其颜色和名称。OK最后，当您通过单击特定关闭菜单时document会更新。

你对如何做到这一点有任何想法吗？非常感谢您的帮助。 

var i = 1;
$(function(){
    $(document.body).click(function(e){
        var div =  $("<div />", { "class":"document", id:"document"+i })
            .css({
                "left": e.pageX + 'px',
                "top": e.pageY + 'px'
            })
             .append($( "<p>document</p>")+i )
            .appendTo(document.body);
                
  $('.document').click(function(event){
    event.stopPropagation();
});
      $('.menu').click(function(event){
    event.stopPropagation();
});
      document.querySelector(".document").addEventListener("click", function(){
    document.querySelector(".menu").style.display = "block";
});
     document.querySelector(".validate").addEventListener("click", function(){
    document.querySelector(".menu").style.display = "none";
}); 
      
      i++;
    });
});
body{
  width: 100vw;
  height: 100vh;
  background: grey;
}
.document {
    position: absolute;
    transform: translate(-50%, -50%);
  opacity: 1;
  background-color: red;
  resize:both;
  overflow: auto;
  filter: drop-shadow(0 0 0.2rem black);
}

.menu{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  
  <div class="menu">
    <li><input type="text" id="name" name="name" size="10" placeholder="name"></li>
    <li><input type="text" id="color" name="color" size="10" placeholder="color"></li>
    
    <button class ="validate">OK</button>
    </div>
  
</body>

标签： javascripthtmljquery

解决方案

当您首先单击时， document检查是否存在任何带有 ID 的菜单，如果有该菜单，则单击show该菜单，否则创建新菜单。您可以使用clone创建新菜单，然后添加data-id到它并将它们附加到一些 div 下。

然后，当ok单击按钮时，只需使用$(this).closest(".menu_copy").hide();隐藏菜单。

演示代码：

var i = 1;
$(function() {
  $(document.body).click(function(e) {
    var subject = $(".menu_copy")
    //check if target click doesn't have class document && not inside menu_copy
    if ((!$(event.target).hasClass('document')) && (!subject.has(e.target).length)) {

      var div = $("<div />", {
          "class": "document",
          id: "document" + i
        })
        .css({
          "left": e.pageX + 'px',
          "top": e.pageY + 'px'
        })
        .append($("<p>document</p>") + i)
        .appendTo(document.body);
      i++;
    }
  });

  //onclick of document
  $(document).on('click', '.document', function(event) {
    event.stopPropagation();
    var id = $(this).attr("id"); //get id
    //check if there is any div with data-id
    if ($("[data-id =" + id + " ]").length > 0) {
      $("[data-id =" + id + " ]").show() //show it
    } else {
      //create new menu 
      var clone_menu = $(".menu_copy:first").clone();
      $(clone_menu).attr("data-id", $(this).attr("id"))
      $(clone_menu).css("display", "block")
      $(clone_menu).appendTo(".docs"); //append inside docs
    }
  });
  //if ok is clicked
  $(document).on('click', '.validate', function(event) {
  //get color and name
    var name = $(this).closest(".menu_copy").find("input[name='name']").val();
    var color = $(this).closest(".menu_copy").find("input[name='color']").val();
    var data_id = $(this).closest(".menu_copy").attr("data-id")
    $("#" + data_id).text(name);//add name
    $("#" + data_id).css("color", color);//apply color
    $(this).closest(".menu_copy").hide(); //hide the menu
  })
});
body {
  width: 100vw;
  height: 100vh;
  background: grey;
}

.document {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 1;
  background-color: red;
  resize: both;
  overflow: auto;
  filter: drop-shadow(0 0 0.2rem black);
}

.menu {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <div class="menu_copy" style="display:none">
    <li><input type="text" id="name" name="name" size="10" placeholder="name"></li>
    <li><input type="text" id="color" name="color" size="10" placeholder="color"></li>

    <button class="validate">OK</button>
  </div>

  <!--added this divs new menus will go inside this -->
  <div class="docs"></div>
</body>

推荐阅读