【jQuery】jQuery でボタンが押されると文字が変更されるスクリプトを作ってみよう
ボタンが押されると文字列が変更されるスクリプト
今回は jQuery を使って、ボタンをクリックすると文字列が変更されるスクリプトを作ってみます。
サンプル結果
サンプル結果にあるボタンをクリックすると「アメリカの大統領は誰?」という文字列が変更されます。
jQuery + JavaScript
jQuery で「botan2」という id をもった要素がクリックされると、「moji2」という id をもった要素の中身(<div id="moji">変更される部分</div>)が「トランプさん」というテキストに置き換わる処理になっています。
なお、このスクリプトでは文字列を「text」として出力しているので、HTMLのタグはタグとして認識されずそのままの形で出力されます。
「click」イベントはあらかじめ認識させる必要があるため、$(function){ }); の中に入れてページが読み込まれると同時に一度読ませています。これを忘れると「あれ?ボタンをクリックしても何も起こらないぞ・・・」となるので注意してください。
$(function(){
$("#botan2").click(function(){
$("#moji2").text("トランプさん");
});
});
CSS
「#botan2」はボタンのスタイルを設定しています。「#botan2:hover」ではマウスポインターがボタンの上に乗った時にマウスポインターを「手の形」になるようにしている部分です。
<style type="text/css">
<!--
#botan2 {
font-size: 12px;
color: #000;
background-color: #CCC;
text-align: center;
width: 100px;
padding: 3px;
margin-bottom: 10px;
}
#botan2:hover {
cursor: pointer;
}
-->
</style>
HTML
必要な要素は、ボタンの <div> タグと文字を表示する <div> タグの2つです。とくに難しいものではありません。
<div id="botan2">BUTTON</div>
<div id="moji2">アメリカの大統領は?</div>
END