使用jquery在悬停时添加div

Question

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

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

所以要成为 like this（悬停时可以看到一条垂直线）

我试图用代码做到这一点：

$(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");
});
      }
    });
  });

但不工作！

DEMO

Answer 1

第一个问题是你的css 有一个, 插入一个;

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

然后为jquery修改如下：

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

在你的标记中放置一个.line（只有一个一个）只是after每个.draggable，但不是hover或者它会append它每次你hover .draggable 创造了大量的.lines

JSfiddle：http://jsfiddle.net/steo/JB7jN/1/

Answer 2

您必须像这样在准备好的文档中绑定 .hover()：

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

Answer 3

您的“悬停”处理程序会从 $(this) 中删除该类，而不是从附加的子项中删除。

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

Answer 4

如果您只想将行添加到克隆中，请将 start 属性添加到可拖动选项中，如下所示：

$( ".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").hover(function() {
         $(this).append("<div class='line'></div>");
    }, function() {
         $(this).removeClass("line");
    });