0

当用户将鼠标悬停在它上面时，我有一个 div 会插入一个 div childdiv。但问题在于每次悬停时都会重复添加相同的 div。所以我尝试了下面的脚本来检查childdiv是否可用MotherDiv。否则添加Childdiv。这些都是在悬停时发生的。那么，下面的代码有什么问题？

我错过了什么吗？

if ($('.MotherDiv').hasClass('Child'))
{
alert('alerady a div there!');//DO NOTHING
}
else 
 {        
 var Details= "<div class='MotherDiv'><table class='Special'><tr><td>Offers</td></tr><tr><td>CheckOut Now</td></tr></table></div>";
  $(Child).insertAfter($(this));//This is insert the child div on hover
}
4

6 回答 6

2

您上面显示的 JavaScript 片段无效。你不能像那样有换行符。

您可以\在行尾添加 a 以表示它是继续的，但通常不赞成将其视为不好的做法。

if ($('.MotherDiv').hasClass('Child')) {
    alert('alerady a div there!');//DO NOTHING
} else {        
    var Details= "<div class='MotherDiv'>\
       <table class='Special'>\
       <tr><td>Offers</td></tr>\
       <tr><td>CheckOut Now</td></tr>\
       </table>\
       </div>";
    $(Child).insertAfter($(this));//This is insert the child div on hover
}

注意，后面不能有任何字符，\否则会报错。

于 2012-04-19T04:14:24.843 回答
1

你在寻找这样的东西。如果 div 没有，只​​需添加新的 Child 类。如果您需要在母 div 中添加新的子 div，那么您只需稍微自定义代码即可。

http://jsfiddle.net/ETuZB/3/

于 2012-04-19T04:47:04.940 回答
0

问题可能是您有一个跨越多行的字符串。
JavaScript 不以这种方式处理字符串。您需要将字符串分成几部分并将它们连接起来"..." + "..."，或者使用行终止转义\来保留换行符和后面的空格。

var Details= "<div class='MotherDiv'>
 <table class='Special'>
   <tr><td>Offers</td></tr>
   <tr><td>CheckOut Now</td></tr>
 </table>
 </div>";

到：

var Details = "<div class='MotherDiv'>"
            + "<table class='Special'>"
            + "<tr><td>Offers</td></tr>"
            + "<tr><td>CheckOut Now</td></tr>"
            + "</table>
            + "</div>";

或者：

var Details = "<div class='MotherDiv'>              \
                  <table class='Special'>           \
                     <tr><td>Offers</td></tr>       \
                     <tr><td>CheckOut Now</td></tr> \
                   </table>                         \
                </div>";
于 2012-04-19T04:17:32.677 回答
0

假设这是您要生成的 HTML 结构：

<div class="Mother">
    Mother Div Content
    <div class="Child">
        Child Div to be generated dynamically
    </div>
</div>

jQuery 脚本：

$(".Mother").hover(function(){
    var motherDiv = $(this);
    if(motherDiv.find(".Child").length == 0) {
        var childDiv = $("<div class='Child'>Child Div Content</div>");
        motherDiv.append(childDiv);
    }
});
于 2012-04-19T04:40:08.940 回答
0 
$(function(){
    var $motherDiv=$('.MotherDiv');
    $motherDiv.bind('mouseenter',
    function(){
        if($motherDiv.find('.ChildDiv').length==0){
            $('<div></div>',{class:'ChildDiv',text:'Child Data Text'}).appendTo($motherDiv);
        }
    });});
于 2012-04-19T04:56:54.700 回答
-1

在哪里.MotherDiv添加到文档中？您似乎没有插入$(Details).

于 2012-04-19T04:15:08.387 回答