質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

Q&A

解決済

1回答

1242閲覧

一つだと動くのですが二つにすると動きません。

kawadai

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

0グッド

0クリップ

投稿2018/11/06 13:28

編集2018/11/06 19:56

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で記述したほうが良いとのことです。

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

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

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

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

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

m.ts10806

2018/11/06 16:22

portfolio_ayはどこにどのように設置されているのでしょうか。提示のhtmlにはないようですが。あと「WordPress」をタグに追加しておいてください
kawadai

2018/11/06 18:12

想定ではwordpressの記事を想定しています。記事の中に縦向きの本と横向きの本を作る際にこのhtmlを入れる予定です。ですので、上の文章では<div id="portfolio_at">を使用しておりますが、それ記事内の別部分にまたportfolio_atの二つ目があるかもしれませんし、もしくはその記事内にはportfolio_atもしくはportfolio_ayどちらかしか存在しない状況になることもあるかと思います。ですので、必ずしも両者が同時に存在しているわけではありませんので記述は避けさせていただきました。わかりにくくて申し訳ございません。
m.ts10806

2018/11/06 19:39

同一画面内に同一IDは他に存在してはいけません。JavaScriptからも初めのひとつしか認識しないか、特定できず正常動作しません。classは複数存在可能です。#名称だとid=名称とつけられたdomが対応し .名称だとclass=名称とつけられたdomが対応します。
kawadai

2018/11/06 19:54

ありがとうございます。idで解決できたと思っておりましたが今後複数を載せる想定をしていたのでclassのほうに変更にしないと問題点が出てしまうのですね。修正いたします。
m.ts10806

2018/11/06 19:56

もちろんきちんと意図して設置して分けるのであればidでも問題はありませんので、そこは要件と仕様次第ですね
guest

回答1

0

自己解決

なぜか自己解決できてしまいました。
wordpressの設定の問題だったようです。

html

1<div id="portfolio_at"> 2<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt=""></div> 3<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt=""></div> 4</div> 5```<pre><code>関係のものを消したらうまく表示できました。 6元々それらはgutenbergのコードブロックを挿入したらついてきたもので、以後はそれをコピペしてCustom HTMLに移し記述していました。wordpressでhtmlを編集するなら必ずいると思い込んでおりました。

投稿2018/11/06 19:50

kawadai

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問