Question

我有一个div，当用户悬停在它上面时会插入div child div。但问题是每次悬停都会重复添加相同的div。所以我尝试了下面的脚本来检查child MotherDiv中的Child div是否无效。否则添加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 } div。这些都是在悬停时发生的。那么，下面的代码有什么问题？

我错过了什么吗？

{{1}}

Answer 1

您上面显示的JavaScript snipplet无效。你不能在那里有换行符。

您可以在该行的末尾添加\来表示它已继续，但通常不赞成这种做法。

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
}

请注意，\之后不能有任何字符，否则会出错。

Answer 2

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

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

Answer 3

问题可能是你有一个跨越多行的字符串 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>";

Answer 4

假设这是您要生成的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);
    }
});

Answer 5

$(function(){
    var $motherDiv=$('.MotherDiv');
    $motherDiv.bind('mouseenter',
    function(){
        if($motherDiv.find('.ChildDiv').length==0){
            $('<div></div>',{class:'ChildDiv',text:'Child Data Text'}).appendTo($motherDiv);
        }
    });});

Answer 6

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

如果条件不起作用，则使用.hasClass（）

6 个答案: