１．文字を書き換える
文章だけ変化すればいい場合、text()メソッドで書き換えればよいです。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./script.js"></script>
</head>
<body>
<div id="container">
<div id="content1">click me!</div>
</div>
</body>
</html>
$(function(){
$('#content1').click(function(){
$(this).text('fuga');
});
});
２．要素を生成・削除して入れ替える
要素自体を別のものに変えたいような場合は、新たに要素を生成して古い要素の後ろに追加し、古い要素を削除します。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./script2.js"></script>
</head>
<body>
<div id="container">
<div id="content1">click me!</div>
</div>
</body>
</html>
$(function(){
$('#content1').click(function(){
var newElem = $('<p>foo</p>')
$(this).after(newElem).remove();
});
});
３．要素の表示・非表示を切り替える
大きめの画像などを入れ替える場合、HTMLの内容を書き換えて新しくimg要素を追加すると、画像の表示にタイムラグが発生したりします。そういった場合、あらかじめ表示させる予定の要素を全て並列に用意しておき、初期状態で表示させたいもの以外はCSSでdisplay:"none" を設定しておきます。そしてjQueryのshow()とhide()メソッドで表示・非表示を切り替えます。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./script3.js"></script>
</head>
<body>
<div id="container">
<div id="content1"><img src="sample1.png"/>click me!</div>
<div id="content2" style="display:none"><img src="sample2.png"/>bar</div>
</div>
</body>
</html>
$(function(){
$('#content1').click(function(){
$(this).hide();
$('#content2').show();
});
});
今回挙げたのはあくまで一例にすぎませんが、jQueryだと記述が分かりやすく状況に応じて最適な方法を模索しやすいのがいいですね。
※この記事について指摘・意見・提案・感想などありましたら下のコメント欄にどうぞ。
0 件のコメント:
コメントを投稿