0

ユーザーがカーソルを合わせると、div childdivが挿入されます。しかし、問題はホバーごとに同じ div を繰り返し追加することです。childそのため、 div availabeMotherDivが何もしないかどうかを確認するために、以下のスクリプトを試しました。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
}
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

これが生成したい 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

問題は、複数行にまたがる文字列がある可能性があります。
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 
$(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 に答える