jQuery初心者です。
基本中の基本なのかもしれないのですが私には対処ができないので皆様を頼らさせていただきます。
したいこと
jQueryによる分岐操作みたいなものをイメージしております。
分岐といってもクラス分けにより私が毎回クラス付与して行うので、ただ単に二つのjQueryが一緒にいることを目指しております。
理想は写真の縦横どちらが大きいかを判断して、縦型、横型と変わってくれれば最高です。
今してること
jQuery一つでやると動くものが、二つあると正常に動作しません。
大元がturn.jsというものを使用しております。その一部分の表記に当たるのですが、おそらく今回は文法記述が問題になっているかと思いますので説明は省略させていただきます。
jQuery
1jQuery(function(){ 2 3 jQuery('#portfolio_at').turn( 4 { 5 elevation: 50, 6 gradients: true, 7 autoCenter: false, 8 direction: 'ltr', 9 } 10 ); 11 jQuery('#portfolio_ay').turn( 12 { 13 14 elevation: 50, 15 gradients: true, 16 autoCenter: false, 17 direction: 'ltr', 18 } 19 ); 20}); 21```ファイル自体はこれしか記述されていない.jsになります。 22portfolio_at が縦向き とportfolio_ay が横向きと考えてまして 23```css 24#portfolio_at{ 25 height: 594px; 26 width: 420px; 27} 28 29#portfolio_ay{ 30 height: 420px; 31 width: 594px; 32} 33```縦方向と横方向はcssにより分けてクラスで毎回変更しようかと思っております。 34 35縦横を分けた理由は画像を張ると、写真自体よりも大きなdivが勝手に設定されてしまって挙動がおかしくなってしまうからです。 36ここに関してもよくはわかっておりません。 37 38今回の.jsを運用するとatとayが二つある状況では、wordpressのhtml側でクラス付与してもjQueryとして動こうとしてくれません。片方のみだと問題なく動作いたします。 39このように二つの表記はできないものなのでしょうか?別でファイルを作っておくものなのでしょうか? 40もしくは画像の大きさを自動取得してdivを最適なサイズで設定してくれるものがあるのでしょうか? 41 42ざっくりとした質問になってしまいましたが、回答よろしくお願いいたします。 43 44 45```html 46<pre class="wp-block-code"><code> 47<div id="portfolio_at"> 48<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt=""></div> 49<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt=""></div> 50</div> 51</code></pre> 52```wordpressにはこのような表記をしています。ここのidをat ay使い分けることで縦横を変えられるかなと思っております。 53 54### 追記 55wirdpress記事内に質問にもありましたとおり、本の部分をもう一つ作って実際に動かしてみました。 56```html 57<pre class="wp-block-code"><code> 58<div id="portfolio_at"> 59<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt=""></div> 60<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt=""></div> 61</div> 62</code></pre> 63 64<pre class="wp-block-code"><code> 65<div id="portfolio_at"> 66<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_01.jpg" alt=""></div> 67<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_02.jpg" alt=""></div> 68<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_03.jpg" alt=""></div> 69<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_04.jpg" alt=""></div> 70</div> 71</code></pre> 72```このようにすると、上段の本は表示されるのですが下段の本は各ページの写真が縦に羅列されるのみになっており本のjsを読み込みできていないのかなという感じになっておりました。私の理解不足かもしれませんが、idとクラスの違いかと思い、 73```jquery 74 jQuery('.portfolio_at').turn(
html
1<pre class="wp-block-code"><code> 2<div class="portfolio_at"> 3<div><img src="http://localhost/wordpre ... 4```のように元々idであった個所をクラスとして記述してみたのですが、やはり上段の本は表示、二個目の本はjsが適応されていないような状況になっているようでした。ですので、やはりjQueryの記述の問題なのでしょうか。 5 6ほぼ同じ内容なので一つのファイルにまとめたい(読み込み速度にかかわってくるのかなと思っております)のですが、この程度の微小な変更を加えた二つの内容でも、portfolio_at.js と portfolio_ay.js のように分けなくてはいけないのでしょうか... 7 8おそらく二つに分ければできてしまう内容かもしれないのですが、今後のjQuery学習のために一つにまとめる方法を是非ご教授願いたいです。 9 10### 後記 11idで記述している箇所が多々あるのですが、複数を想定している場合はclassで記述したほうが良いとのことです。
回答1件
あなたの回答
tips
プレビュー