こんにちは。to-Rの西畑です。jQueryによるJavaScript入門、13回目はtextの制御を行ってみたいと思います。
まずはサンプルをご覧ください。
第11回 attrによる属性値の制御で作成したギャラリーにキャプションが切り替わる処理を追加したものです。
jQueryのコードです。
$(function(){ $("a").click(function(){ $("img").attr("src",$(this).attr("href")); $("strong").text($(this).text()); return false; }) });
今回追加されたのは以下のコードです。
$("strong").text($(this).text());
ここでtextを利用してテキストを制御しています。
jQueryでテキストの制御
テキストの取得
$(セレクタ).text()
指定した要素内のテキストを取得する命令です。
$(this).text()
サンプルではクリックされた要素内のテキストを取得しています。
テキストの変更
$(セレクタ).text("変更後のテキスト")
指定した要素内のテキストを変更する命令です。
$("strong").text("変更後のテキスト")
サンプルではstrong要素内のテキストを変更しています。
今回のサンプルでは取得と変更を組み合わせて、strong要素内のテキストをクリックされた要素内のテキストに変更しています。
