Javascript 使用jquery在悬停时添加div

我构建了一个类似“trip planner”的项目，但我需要在克隆的div对象上添加一条垂直线，位于css的左边框上：

.line
  { width:5px, height:200px; background:red;}

所以成为某样东西（你可以看到悬停在一条垂直线上）

我试图用代码实现这一点：

$(function() {
    //$( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
      revert: 'invalid', 
      helper:"clone",
      snap: "#drop_here td", 
      opacity: 0.7
    });
    $( "#drop_here td" ).droppable({
      // accept only from left div, 
      // this is necessary  to prevent clones duplicating inside droppable
      accept: '#left .draggable',
      drop: function( event, ui ) {
        // 4 append clone to droppable
        $( this ).append(
          // 1 clone draggable helper
          $(ui.helper).clone()

          // 2 make the clone draggable
          .draggable({
             containment:"#table",
            snap: "#drop_here td" 
          })
          // 3 make the clone resizable
          .resizable());

//HERE IS MY PROBLEM IN CODE
        $(".draggable").hover(function() {
    $(this).append("<div class='line'></div>");
}, function() {
    $(this).removeClass("line");
});
      }
    });
  });

$（函数（）{
//$（“.draggable”）.resizeable（）；
$（“.draggable”）.draggable({
还原：“无效”，
助手：“克隆”，
抓拍：“把你放在这里”，
不透明度：0.7
});
$（“#在此处放置td”）。可放置({
//仅从左div接受，
//这是必要的，以防止克隆复制内可拖放
接受：“#左。可拖动”，
drop：函数（事件、用户界面）{
//4将克隆附加到可拖放
$（此）。附加(
//1克隆可拖动辅助程序
$（ui.helper.clone（））
//2使克隆可拖动
.拖拉({
遏制：“表格”，
抓拍：“把你放在这里”
})
//3使克隆可调整大小
。可调整大小（）；
//这是我在代码方面的问题
$（“.draggable”）.hover（函数（）{
$（此）。追加（“”）；
}，函数（）{
$（此）.removeClass（“行”）；
});
}
});
});

但是不要工作

您的“hover out”处理程序从$中删除类（this）--而不是从附加的子级中删除类

---

动态地在hover上创建元素可能是一种不好的做法，这些元素永远不会被删除，并且可能会逐渐用垃圾填充文档。

第一个问题是，您的

css

有一个

，

而不是

.line { 
  display: none;
  width: 5px; 
  height: 200px;
  background: red;
}

然后对
jquery
进行如下修改：

$('.draggable').hover(function(){
    $(this).find('.line').show();
}, function() {
    $(this).find('.line').hide();
});

在您的标记中，将
.line
（仅一行）放置在
之后，而不是
悬停在
上，否则每次您将
悬停在
上时，它都会
附加它

jsIDLE:
您必须像下面这样绑定文档中的.hover（）：

$(document).ready(function(){
      $(".draggable").hover(function() {
          $(this).append("<div class='line'></div>");
      }, function() {
          $(this).children('.line').remove();
      });
});

$( ".draggable" ).draggable({
  revert: 'invalid', 
  helper:"clone",
  snap: "#drop_here td", 
  opacity: 0.7,
  start: function(event, ui){
    var clone = $(ui.helper);
    if (clone.children('div.line').length == 0)
        clone.append("<div class='line'></div>");
  }
});

$（文档）.ready（函数（）{
$（“.draggable”）.hover（函数（）{
$（此）。追加（“”）；
}，函数（）{
$（this.children（'.line'）.remove（）；
});
});
如果只想将行添加到克隆中，请将start属性添加到可拖动选项中，如下所示：

$(document).ready(function(){
      $(".draggable").hover(function() {
          $(this).append("<div class='line'></div>");
      }, function() {
          $(this).children('.line').remove();
      });
});

$( ".draggable" ).draggable({
  revert: 'invalid', 
  helper:"clone",
  snap: "#drop_here td", 
  opacity: 0.7,
  start: function(event, ui){
    var clone = $(ui.helper);
    if (clone.children('div.line').length == 0)
        clone.append("<div class='line'></div>");
  }
});

$（“.draggable”）.draggable({
还原：“无效”，
助手：“克隆”，
抓拍：“把你放在这里”，
不透明度：0.7，
开始：功能（事件、用户界面）{
var clone=$（ui.helper）；
if（clone.children（'div.line'）。长度==0）
克隆。追加（“”）；
}
});

测试了这个，它就像一个符咒。。不要忘记卸下此部件：

    $(".draggable").hover(function() {
         $(this).append("<div class='line'></div>");
    }, function() {
         $(this).removeClass("line");
    });

$（“.draggable”）.hover（函数（）{
$（此）。追加（“”）；
}，函数（）{
$（此）.removeClass（“行”）；
});
dude它正在工作..检查代码..不，悬停上的垂直线不会显示非常干净的解决方案：）但我只需要克隆对象时使用它。。。同样是Samedode，您缺少添加。行到draggable，我在我链接的一个中创建了它，它工作得非常完美。听着，这个codesteo的答案并不完全正确。。它将显示和隐藏具有类“line”的所有元素。。但是一开始就没有。。我刚刚复制了您的代码，但在mouseout处理程序中，您不应该只删除line元素的类，而应该使用$（this）.children（'.line'）.remove（）；相反我为你更新了我的第一篇文章。不，你的方法不正确：每次创建一个行div，这是一个糟糕的方法，我会修复我的代码。你可以轻松地在悬停状态下创建dom元素，只要你在mouseout上删除它们。不，这还不错。。这是一个很好的解决方案，创建和删除dom元素没有问题。这就是javascript的用途。。dom操作。当你不需要的时候，这是一种糟糕的方法。就我的两分钱。好的，它在这里。。我现在将其保存为模板。。或者我还应该做什么？我对jsbin不太了解..只需进入BINS，然后克隆，然后复制链接并粘贴到此处我不知道。。元素就在那里。。而且只有在克隆中。。请注明答案。。您的css可能有问题。。或者尝试在divok中添加“”（不间断空格）好的，我会标记答案，但如果您可以通过电子邮件发送此代码，请发送给我：mslavko6@gmail.com…进入垃圾箱/下载并发送到电子邮件mslavko6@gmail.com