EVERDEVEL

自分を意味するthis()

thisは自分を意味します。

もし同じクラスのタグがたくさんあるとしたら次のように

状況1

HTML

<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>
<div class="click">わたしだけ、テキストを変更してくださいね。</div>

CSS

.click{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer}

例

わたしだけ、テキストを変更してくださいね。

$('.click').click(function(){
    $('.click').text('本当に私だけテキストが変わったの？');
});

したにあるのを一個、押してみよう。

わたしだけ、テキストを変更してくださいね。

一つだけ押したのにクラスなが同じだから全部変わってしまう、これは当然なことだけど、、、

どうすればいいのか

そうだ！！！　クラスなの全部違う名にしてみよう。

HTML

<div class="click1">わたしだけ、テキストを変更してくださいね。</div>
<div class="click2">わたしだけ、テキストを変更してくださいね。</div>
<div class="click3">わたしだけ、テキストを変更してくださいね。</div>
<div class="click4">わたしだけ、テキストを変更してくださいね。</div>
<div class="click5">わたしだけ、テキストを変更してくださいね。</div>
<div class="click6">わたしだけ、テキストを変更してくださいね。</div>
<div class="click7">わたしだけ、テキストを変更してくださいね。</div>
<div class="click8">わたしだけ、テキストを変更してくださいね。</div>
<div class="click9">わたしだけ、テキストを変更してくださいね。</div>

クラスの後ろに数字を書きした。

なのでjQueryソースも下のように。。

jQuery

$('.click1').click(function(){
    $('.click1').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click2').click(function(){
    $('.click2').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click3').click(function(){
    $('.click3').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click4').click(function(){
    $('.click4').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click5').click(function(){
    $('.click5').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click6').click(function(){
    $('.click6').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click7').click(function(){
    $('.click7').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click8').click(function(){
    $('.click8').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click9').click(function(){
    $('.click9').text('本当に私だけテキストが変わったんですね。 ^-^');
});

CSS

設計が間違ったからCSSも全部書く。。。。。

.click1{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click2{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click3{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click4{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click5{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click6{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click7{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click8{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click9{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

結果

わたしだけ、テキストを変更してくださいね。

위 결과를 보자.. 성공했다. 누른것만 바뀌게 된다. ^^

this를 모르면 이 기능을 구현하기 위해 다음과 같은 엄청난 양의 소스를 입력해야만 한다.

<div class="click1">わたしだけ、テキストを変更してくださいね。</div>
<div class="click2">わたしだけ、テキストを変更してくださいね。</div>
<div class="click3">わたしだけ、テキストを変更してくださいね。</div>
<div class="click4">わたしだけ、テキストを変更してくださいね。</div>
<div class="click5">わたしだけ、テキストを変更してくださいね。</div>
<div class="click6">わたしだけ、テキストを変更してくださいね。</div>
<div class="click7">わたしだけ、テキストを変更してくださいね。</div>
<div class="click8">わたしだけ、テキストを変更してくださいね。</div>
<div class="click9">わたしだけ、テキストを変更してくださいね。</div>

$('.click1').click(function(){
    $('.click1').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click2').click(function(){
    $('.click2').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click3').click(function(){
    $('.click3').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click4').click(function(){
    $('.click4').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click5').click(function(){
    $('.click5').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click6').click(function(){
    $('.click6').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click7').click(function(){
    $('.click7').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click8').click(function(){
    $('.click8').text('本当に私だけテキストが変わったんですね。 ^-^');
});

$('.click9').click(function(){
    $('.click9').text('本当に私だけテキストが変わったんですね。 ^-^');
});
.click1{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click2{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click3{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click4{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click5{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click6{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click7{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click8{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click9{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

しかしthisを使うとこうソースが変わるんだ。

$('.view').click(function(){
  $(this).text('本当に私だけテキストが変わったんですね。 ^-^');
});

上のコードたちと関係なくするためclassの名をviewに変更します。

HTML

<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>
<div class="view">わたしだけ、テキストを変更してくださいね。</div>

CSS

.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

jQuery

$('.view').click(function(){
  $(this).text('本当に私だけテキストが変わったんですね。 ^ㅡ^');
});

結果

わたしだけ、テキストを変更してくださいね。

eventを起こした自分だけを選択するときはthisを使います。

練習してみてください。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script>
$(function(){
    $('.view').click(function(){
        $(this).text('本当に私だけテキストが変わったんですね。 ^ㅡ^');
    });
});
</script>
<style>
.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
</style>
</head>
<body>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
    <div class="view">わたしだけ、テキストを変更してくださいね。</div>
</body>
</html>

次のコンテンツは
find

ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。

新しい窓を開き

講義に戻る。

everdevel

coding

EVERDEVEL

自分を意味するthis()

状況1

HTML

CSS

例

HTML

jQuery

CSS

結果

しかしthisを使うとこうソースが変わるんだ。

HTML

CSS

jQuery

結果

練習してみてください。