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

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

ただいまの
回答率

88.64%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 584

kawadai

score 11

jQuery初心者です。
基本中の基本なのかもしれないのですが私には対処ができないので皆様を頼らさせていただきます。

 したいこと

jQueryによる分岐操作みたいなものをイメージしております。
分岐といってもクラス分けにより私が毎回クラス付与して行うので、ただ単に二つのjQueryが一緒にいることを目指しております。
理想は写真の縦横どちらが大きいかを判断して、縦型、横型と変わってくれれば最高です。

 今してること

jQuery一つでやると動くものが、二つあると正常に動作しません。
大元がturn.jsというものを使用しております。その一部分の表記に当たるのですが、おそらく今回は文法記述が問題になっているかと思いますので説明は省略させていただきます。

jQuery(function(){

    jQuery('#portfolio_at').turn(
      {
                elevation: 50,
                gradients: true,
                autoCenter: false,
                direction: 'ltr',
        }
    );    
    jQuery('#portfolio_ay').turn(
      {

                elevation: 50,
                gradients: true,
                autoCenter: false,
                direction: 'ltr',
        }
    );
});

ファイル自体はこれしか記述されていない.jsになります。
portfolio_at が縦向き とportfolio_ay が横向きと考えてまして

#portfolio_at{
    height: 594px;
    width: 420px;
}

#portfolio_ay{
    height: 420px;
    width: 594px;
}

縦方向と横方向はcssにより分けてクラスで毎回変更しようかと思っております。

縦横を分けた理由は画像を張ると、写真自体よりも大きなdivが勝手に設定されてしまって挙動がおかしくなってしまうからです。
ここに関してもよくはわかっておりません。

今回の.jsを運用するとatとayが二つある状況では、wordpressのhtml側でクラス付与してもjQueryとして動こうとしてくれません。片方のみだと問題なく動作いたします。
このように二つの表記はできないものなのでしょうか?別でファイルを作っておくものなのでしょうか?
もしくは画像の大きさを自動取得してdivを最適なサイズで設定してくれるものがあるのでしょうか?

ざっくりとした質問になってしまいましたが、回答よろしくお願いいたします。

<pre class="wp-block-code"><code>
<div id="portfolio_at">
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt=""></div>
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt=""></div>
</div>
</code></pre>

wordpressにはこのような表記をしています。ここのidをat ay使い分けることで縦横を変えられるかなと思っております。

 追記

wirdpress記事内に質問にもありましたとおり、本の部分をもう一つ作って実際に動かしてみました。

<pre class="wp-block-code"><code>
<div id="portfolio_at">
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt=""></div>
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt=""></div>
</div>
</code></pre>

<pre class="wp-block-code"><code>
<div id="portfolio_at">
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_01.jpg" alt=""></div>
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_02.jpg" alt=""></div>
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_03.jpg" alt=""></div>
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/11/ページ_04.jpg" alt=""></div>
</div>
</code></pre>

このようにすると、上段の本は表示されるのですが下段の本は各ページの写真が縦に羅列されるのみになっており本のjsを読み込みできていないのかなという感じになっておりました。私の理解不足かもしれませんが、idとクラスの違いかと思い、

 jQuery('.portfolio_at').turn(
<pre class="wp-block-code"><code>
<div class="portfolio_at">
<div><img src="http://localhost/wordpre ...

のように元々idであった個所をクラスとして記述してみたのですが、やはり上段の本は表示、二個目の本はjsが適応されていないような状況になっているようでした。ですので、やはりjQueryの記述の問題なのでしょうか。

ほぼ同じ内容なので一つのファイルにまとめたい(読み込み速度にかかわってくるのかなと思っております)のですが、この程度の微小な変更を加えた二つの内容でも、portfolio_at.js と portfolio_ay.js のように分けなくてはいけないのでしょうか...

おそらく二つに分ければできてしまう内容かもしれないのですが、今後のjQuery学習のために一つにまとめる方法を是非ご教授願いたいです。

 後記

idで記述している箇所が多々あるのですが、複数を想定している場合はclassで記述したほうが良いとのことです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/07 04:39

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

    キャンセル

  • kawadai

    2018/11/07 04:54

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

    キャンセル

  • m.ts10806

    2018/11/07 04:56

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

    キャンセル

回答 1

check解決した方法

0

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

<div id="portfolio_at">
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt=""></div>
<div><img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt=""></div>
</div>

<pre><code>関係のものを消したらうまく表示できました。
元々それらはgutenbergのコードブロックを挿入したらついてきたもので、以後はそれをコピペしてCustom HTMLに移し記述していました。wordpressでhtmlを編集するなら必ずいると思い込んでおりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る