忍者ブログ

からすまる日誌

20191125_01 フォトギャラリー続き

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

20191125_01 フォトギャラリー続き

前回の続き
フォトギャラリー
 

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で十分。
 

ちょっとこれを後で読む
 
 
PR

コメント

ブログ内検索

カレンダー

04 2025/05 06
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31