クリックイベント (クリックした時に機能作動)

今度はクリックをした時に作動する機能を作ってみましょう。

状況１

hello worldという文字列をクッリクした時に hello worldが消えるようにやってみましょう。^^

click()

clickの時にどんなイベントが発生するには　click()関数を使います。使い方はとても簡単です。

クリックしたいセレクターを書いてから.click(function(){を書いてください。

もし

<div class="content">Hello world!!</div>

を作成sて、Hello world!!をクリックするクリックイベントをjQueryで書くとするなら
まず、 contentクラスを選択します。

$('.content')

上のようにですね。
そして.(ドット)を書いてからclick()関数を書きます。では、したのようになりますね。

$('.content').click();

上のコードは私たちがcontentクラスを強制クリックするソースですね。他人がクリックした時に機能が作動するにはイベントを作りますね。
function(){}が要ります。
何かをクッリクする時にどんな機能が作動するにはclick()の中にfunction(){}を書きます。

$('.content').click(function(){});

クリックする時に作動する命令後はfunction(){}の {と}の間に書きます。
私たちは hello worldをクリックする時に　hello worldが消える機能が作ろうとするので{}の中にhello wolrdがあるセレクターなcontentクラスを選択します。
では次のようになりますね。

$('.content').click(function(){
  $('.content');
});

消える関数はhide()ですん。
したのように.hide();を書きます

$('.content').click(function(){
  $('.content').hide();
});

上のようになりますね。

結論は。。

$(function(){
    $('.content').click(function(){
        $('.content').hide();
    });
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    $('.content').click(function(){
        $('.content').hide();
    });
});
</script>
</head>
<body>
<div class="content">hello world</div>
</body>
</html>

もう一回やってみましょう。
showボタンとhideボタンを作ってshowボタンを押すと文字れが見える、hideボタンを押すと見えない
機能を作ってみましょう。HTMLはしたのように書きます。

Hello world!!!

これもとても簡単です。最初に見るshowという関数を使います。見せる関数です。

$(function(){
    $('.btn_show').click(function(){
        $('.btn_word').show();
    });
    $('.btn_hide').click(function(){
        $('.btn_word').hide();
    });
});

全体ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    $('.btn_show').click(function(){
        $('.btn_word').show();
    });
    $('.btn_hide').click(function(){
        $('.btn_word').hide();
    });
});
</script>
</head>
<body>
<button class="btn_show" style="padding:3px">show</button>
<button class="btn_hide" style="padding:3px">hide</button>
<div class="btn_word">Hello world!!!</div>
</body>
</html>

結果