前提・実現したいこと
ここに質問の内容を詳しく書いてください。
(例)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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。