準確地在點擊提交的地方創建一個div？

我想創建一個div正好提交點擊，下面是我的嘗試，但沒有發生。有人能告訴我爲什麼請嗎？準確地在點擊提交的地方創建一個div？

HTML：

<div id="commentArea"></div> 
<div id="commentBox"></div>

JS：

var commentBox = $('#commentBox'); 
var offset = -10; 
var posX, posY 
var boxCount = 0; 

commentBox.click(function(e){ 
    $('#commentArea').append('<div class="box-' + boxCount + '"></div>'); 
    $('.box-' + boxCount).offset({ 
     top: posY, 
     left: posX 
    }); 
    boxCount++;  
});

CSS：

#commentBox, 
[class^=box] { 
    width: 200px; 
    height: 100px; 
    background-color: yellow; 
    position: absolute; 
    display: inline-block; 
    z-index: 60; 
    float: left; 
} 

[class^=box] { 
    z-index: 1; 
}

來源

2016-06-10 Karen Chan

你可以在jsfiddle/stack-snippet – Tushar

上提供現場演示第一個問題是你正在追加文本，所以你附加的div不是DOM的一部分。您需要將其添加到DOM中，然後您可以通過'.box-etc ...'來訪問div。' –

準確定義。確切地說，在屏幕上滾動不會影響它（固定）相對於其他元素或窗口？ –

這將創建一個子DIV在鼠標點擊在父（淺藍色）DIV 。孩子的左上角將會是鼠標點擊的地方，但是如果您想要，可以通過考慮高度和新孩子的位置來調整孩子的位置。

document.getElementById("landingPad").addEventListener("click", function(event){ 
 
    var newDiv = document.createElement("div"); 
 
    newDiv.classList.add("addedDiv"); 
 
    newDiv.style.left = event.clientX - this.offsetLeft + "px"; 
 
    newDiv.style.top = event.clientY - this.offsetTop + "px"; 
 
    
 
    this.appendChild(newDiv); 
 
});

#landingPad { 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: aliceblue; 
 
    position: relative; 
 
} 
 

 
.addedDiv { 
 
    height: 30px; 
 
    width: 30px; 
 
    background-color: blue; 
 
    position: absolute; 
 
}

<div id="landingPad"></div>

來源

2016-06-10 15:32:57 JonSG

它有問題。點擊添加框。 – Mohammad

謝謝@Mhamhammad – JonSG

爲posX和posY您的代碼不設定值。

試試這個JavaScript。之後，改變你的想法。

var commentBox = $('#commentBox'); 
var offset = -10; 
var posX = 10, posY = 10; 
var boxCount = 0; 

commentBox.click(function(e){ 
    $('#commentArea').append('<div class="box-' + boxCount + '">' + boxCount + '</div>'); 
    $('.box-' + boxCount).offset({ 
     top: posY * boxCount, 
     left: posX * boxCount 
    }); 
    boxCount++;  
});

來源

2016-06-10 15:34:26

正如Hanlet解釋的那樣。如果你看DOM，就會發生一些事情。

現在你也可以強迫它看到一些元素，你會看到發生了什麼。

Check out what I did here

我改變

$('#commentArea').append('<div class="box-' + boxCount + '"></div>');

到

$('#commentArea').append('<div id="box-' + boxCount + '" class="box"></div>');

所以它的類是相同的，它可以可視化，以及一些CSS。 id屬性是動態的。

來源

2016-06-10 15:39:13 hellbinder

準確地在點擊提交的地方創建一個div？

回答

相關問題