jQuery:将DIV (内容)添加到鼠标单击的页面
jQuery:将DIV (内容)添加到鼠标单击的页面
提问于 2018-06-05 02:09:39
我甚至不确定我应该在这里寻找什么(就搜索词而言)
我们有一个图像地图..我想添加一些‘内容’相关的‘热点’点击的图像地图使用jQuery来动态添加一些内容(DIV/下拉...随便什么)的地方，鼠标点击页面/图像地图。
即:图像映射被点击。一些动态填充的数据被添加到鼠标单击发生的位置，以显示一些数据
我可以想象后端部分可以/将使用一些ajax或任何东西来完成(现在不是一个真正的问题)。
我的困惑是前端部分。
更新：
谢谢你的回答。正如你在下面的评论中看到的……我实际上使用的是position:absolute，只是使用了鼠标点击(捕获)的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
Stack Overflow用户
回答已采纳
发布于 2018-06-05 03:17:35
听起来你有一个相当广泛的问题，所以我将把我的答案集中在创建一个新的div的部分，鼠标被点击的地方。
本质上，您将需要这些新创建的元素具有一个display: absolute；css属性，以便可以在任何地方创建它们，然后在鼠标单击事件上，使用pageX和pageY属性获取鼠标x和y。
下面是我制作的一个示例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(“.css”)上
和CSS：
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: rgba(0,0,255,0.9);
border: 2px solid black;
position: absolute;
}这里最重要的部分是“位置:绝对”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50686435
复制相关文章
相似问题