我有这个程序，您可以在其中创建可拖动的<div></div>'s，然后可以将div拖动到表中的<td></td>，当您将鼠标悬停在<td></td>上时，当您单击按钮时，会显示一个按钮。悬停在<td></td>上的所有内容都应该删除。
我试着用这个函数检查被悬停的<td></td>，并删除里面的所有内容，但它没有：
function dump() {
var hover = $("td").hover;
$( hover ).remove();
}
$( "button" ).on( "click", dump );
是否可以检查正在悬停的div？如果没有，我该怎么做才能删除<td></td>中的内容？
这里更详细地介绍了我的代码的目标：
用户输入文本->用户输入以可拖动的div->用户可以将输出拖动到<td></td>->然后，用户可以点击一个按钮(悬停时显示(来删除<td></td>中的内容
这是我的完整代码：
function addElement () {
var text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.id = 'temp'
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
var td = document.getElementsByTagName('td');
var div = document.getElementsByTagName('div');
$(div).draggable();
$("#temp").draggable();
$(td).droppable({
drop: function( event, ui ) {
$( this )
.addClass("div")
.html( text );
$("div").draggable();
$( "#temp" ).remove();
}
});
});
document.getElementById("input").value = " ";
$(function () {
$("td").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + text + '" />');
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
}
var td = document.getElementsByTagName('td');
$( "td" ).hover(
function() {
$( this ).append( $( "<button>Click</button>" ) );
function dump() {
/*"function to remove content in only this <td></td> that has been hovered over*/
}
$( "button" ).on( "click", dump );
}, function() {
$( this ).find( "button" ).last().remove();
}
);body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
div {
text-align: center;
border: 1px solid #d3d3d3;
width: 100px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
.blank {
}
.div3 {
position: absolute;
text-align: center;
border: 1px solid #d3d3d3;
padding: 10px;
cursor: move;
z-index: 10;
height: 20px ;
background-color: white;
width: 20px;
color: #fff;
}
.div {
text-align: center;
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
td{
border: 1px solid #d3d3d3;
padding: 10px;
height: 20px ;
width: 200px;
}
div:hover {
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Input text:</h1>
<input id="input" type="text" placeholder="input">
<button onclick="addElement()" >input</button>
<p>Drag your outputs to the div:</p>
<table border="1">
<tr>
<td height="50" width=100></td>
<td height="50" width=100></td>
<td height="50" width=100></td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>我做了一个简单的"转储函数"；正如你所期望/描述的
function addElement () {
var text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.id = 'temp'
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
var td = document.getElementsByTagName('td');
var div = document.getElementsByTagName('div');
$(div).draggable();
$("#temp").draggable();
$(td).droppable({
drop: function( event, ui ) {
$( this )
.addClass("div")
.html( text );
$("div").draggable();
$( "#temp" ).remove();
}
});
});
document.getElementById("input").value = " ";
$(function () {
$("td").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + text + '" />');
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
}
var td = document.getElementsByTagName('td');
$( "td" ).hover(
function() {
$( this ).append( $( "<button>Click</button>" ) );
function dump() {
$(this).parent().html("").removeClass("div");
}
$( "button" ).on( "click", dump );
}, function() {
$( this ).find( "button" ).last().remove();
}
);body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
div {
text-align: center;
border: 1px solid #d3d3d3;
width: 100px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
.blank {
}
.div3 {
position: absolute;
text-align: center;
border: 1px solid #d3d3d3;
padding: 10px;
cursor: move;
z-index: 10;
height: 20px ;
background-color: white;
width: 20px;
color: #fff;
}
.div {
text-align: center;
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
td{
border: 1px solid #d3d3d3;
padding: 10px;
height: 20px ;
width: 200px;
}
div:hover {
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Input text:</h1>
<input id="input" type="text" placeholder="input">
<button onclick="addElement()" >input</button>
<p>Drag your outputs to the div:</p>
<table border="1">
<tr>
<td height="50" width=100></td>
<td height="50" width=100></td>
<td height="50" width=100></td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>虽然在悬停时添加按钮感觉有点奇怪，但就我个人而言，我会在拖放时添加带有display的按钮：none，然后在悬停上用css显示