在jquery

Question

我有此代码：

<div class="container">
         <div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header text-center">
                     <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body mx-3">
                     <div class="md-form mb-5">
                        <i class="fas fa-user prefix grey-text"></i>
                        <input type="text" id="form3" class="form-control validate val1" name="val1">
                        <label data-error="wrong" data-success="right" for="form3">Title</label>
                     </div>
                     <div class="md-form mb-4">
                        <i class="fas fa-envelope prefix grey-text"></i>
                        <input type="email" id="form2" class="form-control validate val2" name="val2">
                        <label data-error="wrong" data-success="right" for="form2">Desc</label>
                     </div>
                     <div class="md-form mb-4">
                        <i class="fas fa-envelope prefix grey-text"></i>
                        <label data-error="wrong" data-success="right" for="form2">
                           Coordinates click: 
                           <div class="coorX"></div>
                           x 
                           <div class="coorY"></div>
                        </label>
                     </div>
                  </div>
                  <div class="modal-footer d-flex justify-content-center">
                     <button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
                  </div>
               </div>
            </div>
         </div>
         <div class="scalize imgpo">
            <img src="img/jacket.png" alt="" class="target ">
            <div class="item-point" data-top="130" data-left="300" id="point1">
               <div><a href="#"  class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 1</h1>"  data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
            <div class="item-point" data-top="180" data-left="462" id="point2">
               <div><a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 2</h1>"  data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
            <div class="item-point" data-top="380" data-left="215" id="point3">
               <div><a href="#"  class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 3</h1>"  data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
            <div class="item-point"  data-left="357"  data-top="458" id="point4">
               <div><a href="#"  class="toggle tooltips" title="<h1><b>xxxxx</b> <em>one</em> here too 4</h1>"  data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
         </div>
      </div>
      <a href="" class="btn btn-default btn-rounded mb-4 formAdd" data-toggle="modal" data-target="#modalSubscriptionForm" style="display:none"></a>
      <script type="text/javascript">
         $(document).ready(function(){

         $('.imgpo').click(function(e) {
          var posX = $(this).position().left,posY = $(this).position().top;
          $('.coorX').html((e.pageX - posX -10));
          $('.coorY').html((e.pageY - posY -10));
          $(".tooltip").tooltip("hide");
          $('.formAdd').click();
         });

         $('.saveBtn').click(function(e) {
            var val1 = $(".val1").val(); 
            var val2 = $(".val2").val(); 

            var values = { 
            'val1'     : val1,
            'val2'     : val2
         };


            alert('Save');


                $.ajax({
         url: "save.php",
         type: "post",
         data: values ,
         success: function (response) {
           alert('Save');
         },
         error: function(jqXHR, textStatus, errorThrown) {
           alert('Error');
         }


         });

         });

         $('.removeMe').on('click', function() {
            var number = $(this).attr('id');
            $('#point' + number).remove();
            $('.obiect' + number).remove();
          });

              $('.scalize').scalize({
                  styleSelector: 'circle',
                  animationPopoverIn: 'flipInY',
                  animationPopoverOut: 'flipOutY',
                  animationSelector: 'pulse2'
              });
              /*
              $('.tooltips').tooltip({
         html: true,
                trigger: 'click',
                placement: 'top'
         })
              */
              const $tooltip = $('.tooltips');
         $tooltip.tooltip({
         html: true,
         trigger: 'click',
         placement: 'top',
         });
         $tooltip.on('show.bs.tooltip', () => {
         $('.tooltip').not(this).remove();
         });
         $tooltip.on('click', (ev) => { ev.stopPropagation(); })


          });            
      </script>
      <div class="itemsBox">
      <form name="saveForm" action="#" method="post">
      <div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
      <div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
      <div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
      <div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
   </div>

         <input type="submit" value="Save" />
      </form>

上面的代码显示图像中的点。在图片下方，我可以从网站和图片中删除点。单击图像后，将显示工具提示（引导程序）。单击背景图像后，将显示用于在图片中添加点的表单。表单具有单击点的坐标。很好。

如何在图片中写一个新点？

要向图像中的点添加新的HTML代码：

<div class = "item-point" data-left = "357" data-top = "458" id = "point4">
                <div> <a href="#" class="toggle tooltips" title="<h1> <b> xxxxx </ b> <em> one </ em> here too 4 </ h1> "data-placement = "top" data-html = "true" rel = "tooltip"> </a> </ div>
             </ Div>

<div class = "obiect4"> Obiect 4 <div class = "removeMe" id = "4"> X </ div> </ div>

如何做到？

预览：http://serwer1356363.home.pl/pub/component/index2.html

Answer 1

这将需要对$(".saveBtn").click()事件进行一些修改，例如：

 $('.saveBtn').click(function(e) {

            e.preventDefault();

            var val1 = $(".val1").val(); // title
            var val2 = $(".val2").val(); // description
            var cX = $(".coorX").text();
            var cY = $(".coorY").text();

            var newPoint = "<div class='item-point' data-top='"+cY+"' data-left='"+cX+"' id='point1'>" +
                               "<div>" +
                                  "<a href='#'  class='toggle tooltips' title='<h1><b>"+val1+"</b><br>"+val2+"</h1>'  data-placement='top' data-html='true' rel='tooltip'></a>" +
                               "</div>" +
                            "</div>";

            var nextObjNumber = $(".itemsBox").children("div").length + 1;

            var newObject = "<div class='obiect" + nextObjNumber + "'>Obiect " + nextObjNumber + 
                                "<div class='removeMe' id='"+nextObjNumber+"'>X</div>" + 
                            "</div>";

            $(".scalize").append(newPoint); // inserting new point
            $(".itemsBox").append(newObject); // inserting new object


            $('.scalize').scalize({
                styleSelector: 'circle',
                animationPopoverIn: 'flipInY',
                animationPopoverOut: 'flipOutY',
                animationSelector: 'pulse2'
            });

            const $tooltip = $('.tooltips');

            $tooltip.tooltip({
                html: true,
                trigger: 'click',
                placement: 'top',
            });

            $tooltip.on('show.bs.tooltip', () => {
                $('.tooltip').not(this).remove();
            });

            $tooltip.on('click', (ev) => { ev.stopPropagation(); });


            $("#modalSubscriptionForm").modal("hide");

            $(".val1").val("");
            $(".val2").val("");

            alert('Saved!');


            //  var values = {
            //          'val1'     : val1,
            //          'val2'     : val2,
            //          'coorY'    : cY
            //          'coorX'    : cX
            //      };
            //
            // $.ajax({
            //     url: "save.php",
            //     type: "post",
            //     data: values ,
            //     success: function (response) {
            //         alert('Save');
            //     },
            //   error: function(jqXHR, textStatus, errorThrown) {
            //     alert('Error');
            //   }
            //
            //
            // });

        });

要解决底部的对象编号问题，请按以下方式更改表格：

<form name="saveForm" action="#" method="post" style="margin-left: 15px">
    <div class="itemsBox" >
        <div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
        <div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
        <div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
        <div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
    </div>
    <input type="submit" value="Save" />
</form>

您可以在此处查看完整的源代码：https://www.codepile.net/pile/5Pgzxg4Z