代码之家 › 专栏 › 技术社区 › whispers

jquery:将div(content)添加到鼠标单击的页面

placement imagemap ajax jquery

whispers · 技术社区 · 6 年前

我甚至不知道我应该在这里寻找什么(就搜索词而言)

我们有一张图像地图。我想添加一些与点击图像地图上的“热点”相关的“内容”,使用jquery在鼠标点击页面/图像地图的地方动态添加一些内容(div/dropdown…whatever)。

IE: 点击图像地图。将一些动态填充的数据添加到鼠标单击显示某些数据的位置

我认为后端部分可以/将使用ajax或其他工具(现在不是真正的关注点)来完成。

我的困惑是前端部分。

更新:

谢谢你的回答。正如你在我下面的评论中看到的……我实际上使用了position:absolute,并且只使用了鼠标点击(capture)的x/y坐标。

这是我的最终结果(减去ajax调用使用的目标php脚本)。

<script type="text/javascript">
            //hide (initial) dynamic content container
            $("#contentDIV").hide();


            document.addEventListener("DOMContentLoaded", function(event) {             
                //jQuery code goes here 
                $('#targetMap area').on('click', function(event) {
                    //alert($(this).attr('id')); 
                    //console.log('clicked');

                    //ajax call to load dynamic data
                    //make ajax call and send data to PHP script for discount checking
                    $.ajax({
                        //async: false,
                        type: "POST",
                        url: "target_script.php?v=1",
                        //datatype: "html",
                        datatype: "text",
                        data:{
                            "targetArea": $(this).attr('id')
                        },
                        success: function(response) {
                            //alert("PHP RETURN CHECK: "+response);
                            if($.trim(response) != ''){                             
                                //update content div with returned/formatted data
                                $("#contentDIV").html("<p> MY TARGET AREA IS: " + response + "</p>");   
                                $("#contentDIV").show().css( {position:"absolute", top:event.pageY, left: event.pageX});                            
                            }else{
                                //update content div with returned/formatted data
                                $("#contentDIV").html("<p> - NO DATA WAS RETURNED FOR THIS AREA - (See Scott, you're in trouble)</p>");
                                $("#contentDIV").show().css( {position:"absolute", top:event.pageY, left: event.pageX});    
                            }
                        },
                        error: function(response) {
                            alert("PHP FAIL RETURN CHECK: "+ 'Ready State: '+ response.readyState + ' Status: ' + response.status);
                            //console.log(response);
                        }

                    });
                });

            });         
        </script>


        <p> 
            <img src="map.gif" width="560" height="280" border="0" usemap="#targetMap">
            <map id="targetMap" name="targetMap">       
                <area shape="poly" coords="514,22,507,50,479,57,477,70,458,78,451,96,490,87,503,102,531,83,540,47,533,23" href="#" alt="northeast" id="northeast">
                <area shape="poly" coords="60,135,104,181,180,186,182,162,164,135,153,112,161,82,125,72,124,106,129,134,119,133" href="#" alt="western" id="western">
                <area shape="rect" coords="3,44,123,129" href="#" alt="rocky mountain" id="rocky mountain">
                <area shape="poly" coords="149,8,129,73,163,82,153,111,183,163,176,188,214,206,237,203,277,204,280,184,281,157,292,153,291,115,278,112,281,59,281,31" href="#" alt="rocky mountain" id="rocky mountain" >
                <area shape="poly" coords="423,53,362,34,282,32,280,110,293,116,293,124,348,124,345,117,372,119,390,154,402,144,421,138,422,130,422,107,436,107,443,108,449,99,450,98,441,74" href="#" alt="midwest" id="midwest" >
                <area shape="poly" coords="249,203,273,242,309,267,328,270,352,241,375,235,398,237,402,228,399,173,383,174,389,155,373,118,339,119,344,124,292,124,291,154,282,157,280,205" href="#" alt="midsouth" id="midsouth" >
                <area shape="poly" coords="400,174,402,223,432,226,478,268,485,254,462,202,504,155,498,142,437,152,446,142,440,136,426,132,417,139,400,143,394,151,392,150,384,171" href="#" alt="southeast" id="southeast" >
                <area shape="poly" coords="503,111,499,98,487,87,449,96,442,109,423,106,421,130,448,141,442,150,456,149,496,140,499,122" href="#" alt="mid atlantic" id="mid atlantic">
            </map>
        </p>

        <div id="contentDIV" style="display:none; padding:10px; border:2px solid #ccc; background-color:#eee; font-family:Arial; font-size:12px; color:#f00;"></div>

Adding this dynamically generated content to the page/map where the mouse click happened?

1 回复 | 直到 6 年前

Brandon Dixon 6 年前

听起来你有一个很宽泛的问题,所以我要把我的答案集中在创建一个鼠标被点击的新div上。

实际上,您需要这些新创建的元素 显示:绝对; css属性,以便可以在任何地方创建它们,然后在鼠标单击事件上,使用 帕克斯 和帕吉属性。

下面是我制作的Jfiddle示例演示: https://jsfiddle.net/BrandonQDixon/d7yhkrzf/32/

代码如下:

$(function() {
    console.log("script begins");
    $(document).on("click",function(e) {
        console.log("Body clicked");

        let x = e.pageX;
      let y = e.pageY;

      addCircle(x,y);
  });
});

/**
* Add a circle to the document and return its handle
*/
function addCircle(x,y) {
    let e = document.createElement('div');
  $(e).addClass("circle");

  let adjX = x - 50; //click happens in center
  let adjY = y - 50; 

  $(e).css("left",adjX);
  $(e).css("top",adjY);
  document.body.appendChild(e);
  return e;
}

上面的操作发生在$(e.css(“left”)和$(e.css(“top”)上

和CSS:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,255,0.9);
  border: 2px solid black;
  position: absolute;
}

这里的重要部分是“位置:绝对”。