前回の続き

フォトギャラリー

　

attrはゲッターとセッターの機能がある

セッターとして：

$('.main img').attr('src','img/3.jpg');//htnlのmain imgを3に書き換え

　

では、サムネイル5番目を押したらトップ絵が5番目の写真になるようにしてみましょう

　

「サムネイル5番目を押したら」→

$('.thumb #img5').on('click',function(){

});

　

「トップ絵が5番目の写真になるよう書き換え」→

$('.main img').attr('src','img/5.jpg');

　

---

idの場合はそのページで唯一であることがわかっているので、

あえてclass名を前に書かなくてもいい。

書いてもいい。

　

スペースで区切るのは子孫クラスタを表すやり方。

世代が離れていてもいい（すぐ下の子供でなくても孫でもひ孫でもいい）

その場合も半角スペースは1つですむ

　

pもimgもそういう「要素」としてattrで操作ができる

　

>また、attrで属性に値を設定する場合は、

$('selector').attr('name','value');

と記述します。

上記を実行すると、selectorが持っているnameという属性の値を、attrの引数2で指定したvalueの値で上書きすることができます。

imgのsrcの書き換えは上記のattrを使用して行います。

 

じゃあ写真下の説明文も書き換えましょう

→　

$('.main p').text('〆のお蕎麦です');

　

これはattrでやる必要がない。textを書き換えるだけならtextで十分。

　

後で読むと良い