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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

Q&A

1回答

1387閲覧

ワードプレス,jqueryについて

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

0グッド

0クリップ

投稿2020/08/29 23:30

編集2022/01/12 10:55

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

ワードプレスを使いjqueryで、クリックイベントをやりたいのですがうまく機能しません。
ç
エラーメッセージ

php

1<?php get_header(); ?> 2 <main> 3 <div id="home"> 4 <div class="left-home"> 5 <img src="<?php echo get_template_directory_uri(); 6 ?>/img/image1.png" alt=""> 7 <div class="left-home-item"> 8 <h1>ホーム</h1> 9 <p>Home</p> 10 </div> 11 <div class="left-home-item2"> 12 <p>PADIライセンス所得ならC</p> 13 </div> 14 </div> 15 <div class="right-home"> 16 <img src="<?php echo get_template_directory_uri(); 17 ?>/img/image4.png" alt=""> 18 <h1>無料のお問合せ</h1> 19 </div> 20 </div> 21     <div id="main-home"> 22 <div class="home-slido"> 23 <?php 24 $スライド_query = new WP_Query( 25 array( 26 'post_type' => 'post', 27 'category_name' => 'スライド', 28 'posts_per_page' => 4, 29 ) 30 ); 31 ?> 32 <?php 33 if ( $スライド_query->have_posts() 34 ) : ?> 35 <?php while ( 36 $スライド_query->have_posts() ) : ?> 37 <?php $スライド_query->the_post(); ?> 38 <div class="home-content"> 39 <?php the_content(); ?> 40 <?php endwhile; ?> 41 <?php endif; ?> 42 <?php wp_reset_postdata(); ?> 43 </div> 44 </div> 45 <div id="NEWS"> 46 <div class="NEWS-title"> 47 <h1>news</h1> 48 </div> 49 <div class="NEWS-list"> 50 <p>全て</p> 51 </div> 52 <div class="NEWS-item1"> 53 <div class="left-post-list"> 54 <?php 55 if(have_posts()): while(have_posts()):the_post(); 56 ?> 57 <div class="left-post-date"> 58 <?php echo get_the_date(); ?> 59 </div> 60 <div class="left-post-item"> 61 <p>ブログ</p> 62 </div> 63 <a href="<?php the_permalink(); ?>" class="left-post-title"> 64 <?php the_title(); ?></a> 65 <?php endwhile; ?> 66 <?php endif; ?> 67 <?php wp_reset_postdata(); ?> 68 </div> 69 <div class="left-news-list"> 70 <?php 71 $posts = new WP_Query( 72 array( 73 'post_type' => 'news', 74 'posts_per_page' => 1 75 ) 76 ); 77 if ( have_posts() ) : while ( $posts->have_posts() ) : $posts->the_post(); 78 ?> 79 <div class="left-news-date"> 80 <?php echo get_the_date(); ?> 81 </div> 82 <div class="left-news-item"> 83 <p>お知らせ</p> 84 </div> 85 <a href="<?php the_permalink(); ?>" class="left-news-title"> 86 <?php the_title(); ?></a> 87 <?php endwhile; ?> 88 <?php endif; ?> 89 <?php wp_reset_postdata(); ?> 90 </div> 91 <div class="center-news-list"> 92 <div class="NEWS-list2"> 93 <p>お知らせ</p> 94 </div> 95 <?php 96 $news_query = new WP_Query( 97 array( 98 'post_type' => 'news', 99 'posts_per_page' => 3 100 ) 101 ); 102 ?> 103 <div class="center-news-logo"> 104 <?php if ( $news_query->have_posts() ) : ?> 105 <?php while ( $news_query->have_posts() ) : ?> 106 <?php $news_query->the_post(); ?> 107 <div class="center-news-date"> 108 <?php echo get_the_date(); ?> 109 </div> 110 <div class="center-news-item"> 111 <p>お知らせ</p> 112 </div> 113 <a href="<?php the_permalink(); ?>" class="center-news-title"> 114 <?php the_title(); ?></a> 115 <?php endwhile; ?> 116 <?php endif; ?> 117 <?php wp_reset_postdata(); ?> 118 </div> 119 </div> 120 </div> 121 </div> 122 </div> 123 <div class="link"> 124 <div class="next-link"> 125 <?php next_posts_link('<img src="'. get_theme_file_uri('/img/競技.png'). '" alt=""'); ?> 126 </div> 127 <div class="previous-link"> 128 <?php previous_posts_link('<img src="'. get_theme_file_uri('/img/競技-2.png'). '" alt=""'); ?> 129 </div> 130 </div> 131</main> 132<?php get_footer(); ?> 133

js

1jQuery(function () { 2 jQuery('.NEWS-list2').on("click", function () { 3 jQuery('.center-news-logo').fadeIn(1500); 4 jQuery('.left-post-list,.left-news-list').remove(); 5 jQuery(document).on('click', '.NEWS-list', function () { 6 jQuery('.center-news-logo').hide(1500); 7 jQuery('.left-post-list,.left-news-list').append(); 8 }); 9 }); 10}); 11

試したこと

NEWS=list2の方は、クリックイベントはうまく行ってます。
classを変更してみたり、consoleを使ってみたりしました。
NEWS-listの方がうまくいきません。
clickした時alertも出ていなかったので、クリック自体認識されていませんでした。
また、fadeInを使ってみてもダメでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2020/08/29 23:48

コードはマークダウンのcode機能を利用してご提示ください。 あと「WordPress」タグをつけてください
退会済みユーザー

退会済みユーザー

2020/08/30 00:15

分かりました。wordpressのタグをつけておきます。 ご指摘ありがとうございます。
退会済みユーザー

退会済みユーザー

2020/08/30 01:17

これでokですか?
退会済みユーザー

退会済みユーザー

2020/08/30 01:22

ありがとうございます
m.ts10806

2020/08/30 01:23 編集

ただ、インデントは元からないということですかね。
退会済みユーザー

退会済みユーザー

2020/08/30 05:14

そうですね
guest

回答1

0

NEWS-listの方がうまくいきません。

インデントをきちんとつけましょう。

jQuery('.NEWS-list2').on("click",function(){の中に入っているのでイベントが正しく付与されません。

投稿2020/08/30 05:18

m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2020/08/30 11:40

インデントをつけたんですけど、エラーが治りません
m.ts10806

2020/08/31 03:04

回答きちんと読んでほしいのですが(1行しか書いてないわけではないし) インデントはあくまで可読性のためです。 ただ、インデントを付けることでおかしい実装になっているのは気づけます。
m.ts10806

2020/08/31 03:06

ただ、 >、エラーが治りません 「エラーが出る」という話は本件ではこのコメントで初めて出ました。 どのようなエラーが出ていたのですか? 「思うように動かない」のはあくまで動作、実装上の不具合であって、エラーメッセージが出ているのであれば「エラー」とは一般的には言いません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問