🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

188閲覧

jQueryを使って要素をスライドさせたい。

knight1220

総合スコア23

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2019/11/20 05:04

編集2019/12/29 11:26

jQueryを使って要素を時計周りに動かしたく以下のようなコードを考えたのですがうまくいかなかったため、質問しました。

html

1<div class="menu_container"> 2 3 <div class="menu1_cover menu_item close s3_30" id="30"> 4 //中略 5 </div><!-- /menu-item --> 6 7 <div class="menu2_cover menu_item s3_31" id="31"> 8 //中略 9 </div><!-- /menu-item --> 10 11 <div class="menu3_cover menu_item s3_32" id="32"> 12 //中略 13 </div><!-- /menu-item --> 14 15</div><!-- /menu_container --> 16<div class="s3_next-btn">next</div> 17<div class="s3_prev-btn">prev</div>

css

1.s3_30{ 2 transform:scale(0.4); 3 top:-50px; 4 right:70%; 5 transition:all 1s ease 0s; 6 } 7 8 .s3_31{ 9 top:150px; 10 right:0%; 11 transition:all 1s ease 0s; 12 13 } 14 15 .s3_32{ 16 transform:scale(0.4); 17 top:-50px; 18 right:-70%; 19 transition:all 1s ease 0s; 20 21 }

jQuery

1$('.s3_prev-btn').click(function(){ 2 var menu_item_length=$('.menu_container').children().length; 3 var max_id=30-1+menu_item_length; 4 for( i=0; i<menu_item_length; i++){ 5 var id=( 30-1+menu_item_length )-i; 6 var id_mai1=id-1; 7 var s3_id_mai1='s3_'+id_mai1; 8 var s3_id='s3_'+id; 9 if( id_mai1 == 29 ){ 10 var s3_id_mai1='s3_'+max_id; 11 $('#'+id).addClass(s3_id_mai1); 12 $('#'+id).removeClass(s3_id); 13 $('#'+id).attr('id',max_id); 14 }else{ 15 $('#'+id).addClass(s3_id_mai1); 16 $('#'+id).removeClass(s3_id); 17 $('#'+id).attr('id',id-1); 18 }// end if 19 20 }//end for 21console.log($('.menu1_cover').attr('id')); 22console.log($('.menu2_cover').attr('id')); 23console.log($('.menu3_cover').attr('id')); 24});

prev-btnを押すとidとクラス名が変換され要素の位置が変わり対応するCSSの位置に動くと考えていたのですが一回目のみ望む動きをしたあと二回目のクリック移行は変化しないという状況になっており悩んでいます。
最後にcosole.logで各要素のidを確認したところ一回目のクリック以降は変化していませんでした。おそらくこれが原因だとは思うのですが何故変化しないのかがわからないのです。

リンク内容
上記のサイトの(1189px~769pxの幅 高さ700px以上で表示したとき)servicesの項目でprevを一回クリックしたときの挙動がやりたいことです。二回目以降も同じ挙動をしたいです。
お手数ですがわかる方がいらっしゃいましたら教えていただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/11/20 05:12

CSSでいくと煩雑になってしまうので根本的に書き直さないといけないように思います。それでも良いでしょうか?
knight1220

2019/11/20 05:25

ありがとうございます。 教えていただけると大変うれしいです。
guest

回答1

0

自己解決

jQueryのコードを以下のように変更することで期待通りの動きになりました。
ついでに逆回転のコードも記載しておきます。

jQuery

1//menuの回転(prev) 2$('.s3_prev-btn').click(function(){ 3 var menu_item_length=$('.menu_container').children().length; 4 var max_id=30-1+menu_item_length; 5 for( i=1; i<menu_item_length+1; i++){ 6 var id=$('.menu'+i+'_cover').attr('id'); 7 var id_mai1=id-1; 8 var s3_id_mai1='s3_'+id_mai1; 9 var s3_id='s3_'+id; 10 var menu_num=$('.menu'+i+'_cover'); 11 if( id_mai1 < 30 ){ 12 var max_class='s3_'+max_id; 13 menu_num.addClass(max_class); 14 menu_num.removeClass(s3_id); 15 menu_num.attr('id',max_id); 16 }else{ 17 menu_num.addClass(s3_id_mai1); 18 menu_num.removeClass(s3_id); 19 menu_num.attr('id',id_mai1); 20 21 }// end if 22 23 }//end for 24 25}); 26 27 28//menuの回転(next) 29$('.s3_next-btn').click(function(){ 30 var menu_item_length=$('.menu_container').children().length; 31 var max_id=30-1+menu_item_length; 32 for( i=1; i<menu_item_length+1; i++){ 33 var id=$('.menu'+i+'_cover').attr('id'); 34 //Number('');で明示的にidが数字であることを示している。(attr('id')で取得した値は文字列扱い。足し算以外の時は暗黙の了解でオートで数字として扱ってくれるが足し算は文字の連結として扱われるため、明示的に数字であることを示さなければならない。) 35 var id_puls1=Number(id)+1; 36 var s3_id_puls1='s3_'+id_puls1; 37 var s3_id='s3_'+id; 38 var menu_num=$('.menu'+i+'_cover'); 39 console.log(id_puls1); 40 if( id_puls1 > max_id ){ 41 var min_class='s3_30'; 42 var min_id=30; 43 menu_num.addClass(min_class); 44 menu_num.removeClass(s3_id); 45 menu_num.attr('id',min_id); 46 }else{ 47 menu_num.addClass(s3_id_puls1); 48 menu_num.removeClass(s3_id); 49 menu_num.attr('id',id_puls1); 50 51 52 }// end if 53 54 }//end for 55});

投稿2019/11/29 00:11

knight1220

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問