JQuery Divタグコード

このassignemntを解決してください。 CSSとhtmlコードが与えられます！しかし、divタグの追加機能は機能しません。削除した後にdivタグをhtmlページに追加するには？JQuery Divタグコード

は、次のコードを書く

A）CSSクラスヘッダブロック書く境界1、色 - 青、フォントサイズ20、フォント名 - のArial、パディングは50pxを。

b）CSSクラスフッタブロック：境界1、カラー - ブラック、高さ-20％、幅-100％、バックグランドカラー - グレーを書き込みます。

c）ボタンクリック時にヘッダブロックの追加クラスとフッターブロック用のjqueryコードを作成します。

d）ボタンをクリックしたときにヘッダーブロックのクラスとフッタブロックを削除するためのjqueryコードを作成します。

e）ボタンクリック時に、Toggle HeaderブロックのClassおよびFooterブロックのjqueryコードを記述します。

$(document).ready(function() { 
 
    $('.remove').click(function() { 
 
    $('.header').remove(); 
 
    $('.footer').remove(); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('.add').click(function() { 
 
    $('body').addClass('div.header'); 
 
    $('body').addClass('div.footer'); 
 
    }); 
 
});

.header { 
 
    border: 1px solid; 
 
    color: blue; 
 
    font-size: 20; 
 
    font-family: arial; 
 
    padding: 50px; 
 
} 
 

 
.footer { 
 
    border: 1px solid; 
 
    color: black; 
 
    height: 20%; 
 
    width: 100%; 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <link rel='stylesheet' style='text/css' href='a30.css'></link> 
 
    <script src='../jquery.js'></script> 
 
</head> 
 

 
<body> 
 
    <div class='header'> 
 
    This is header! 
 
    </div> 
 
    <button class='add'>Add</button> 
 
    <button class='remove'>Remove</button> 
 
    <div class='footer'> 
 
    This is footer! 
 
    </div> 
 

 
</body> 
 

 
</html>

私は解決策を見つける助けてください！

出典

2017-09-11 Sourabh Karmarkar

を、あなたは完全に失われたHTMLを再作成する必要があります。変数に保存するか、Jqueryで.show（）と.hide（）を使うだけです – Brian

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#hide").click(function(){ 
     $("p").hide(); 
    }); 
    $("#show").click(function(){ 
     $("p").show(); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>If you click on the "Hide" button, I will disappear.</p> 

<button id="hide">Hide</button> 
<button id="show">Show</button> 

</body> 
</html>

jQueryのremove（）関数は要素を削除するため、すべてを再度作成する必要があります。要素を切り替える場合は、hide関数とshow関数を使用するのが最良の方法です。それが終わるので、あなたのJavaScriptが間違っている

出典

2017-09-11 18:10:18

、あなたのコードは<body>タグに2クラスを追加します：<body class="div.header div.footer">

は、代わりにあなたは体に要素を追加する必要があります。

$(document).ready(function() { 
    $('.add').click(function() { 
    $('body').addClass('div.header'); 
    $('body').addClass('div.footer'); 
    }); 
});

：

更新に

$(document).ready(function() { 
    $('.add').click(function() { 
    $('body').prepend('<div class="header"></div>'); 
    $('body').append('<div class="footer"></div>'); 
    }); 
});

$('body').prepend()は、要素の先頭に要素を追加します $('body').append()が

設けられた素子の最後に要素を追加します提供

注：divが前に付加されている/追加されているため、空白になります空の場合は、必要に応じて追加する際にこれらの要素の中にhtmlを追加することができます。

それとも、前述したようにはちょうど使用してヘッダー/フッター要素を表示/非表示ができます一度DOMから削除

$(document).ready(function() { 
    $('.remove').click(function() { 
    $('.header, .footer').hide(); // hide footer and header divs 
    }); 

    $('.add').click(function() { 
    $('.header, .footer').show(); // show footer and header divs 
    }); 
});

出典

2017-09-26 15:15:20 NickMcB

答えて

関連する問題