0

私が見つけた少しのjQueryコードをリバースエンジニアリングしています。クリックされた #featured-navigation のサムネイルを に変更することになっていますが、クリックされてclass="selected"いない他のものはclass="". また、 #featured-post の接続された投稿 (サムネイルの href と同じ id) を変更することになっていstyle="display: block;"ますが、他の投稿はstyle="display:none;"です。

私は jQuery が単純であることを知るには十分な知識を持っていますが、それがどのように機能し、どのように使用することになっているのかを知るには十分ではありません。ええええ、私はjQueryについてほとんど無知です。

これが私のjQueryで、フッターで呼び出されています-

/* Featured Rotation */

var featuredContainer = $('div#featured-post > div');
featuredContainer.hide().filter(':first').show();

$('div#featured-navigation > a').click(function () {

    featuredContainer.hide();
    featuredContainer.filter(this.hash).show();
    $('div#featured-navigation > a').removeClass('selected');
    $(this).addClass('selected');
    return false;

}).filter(':first').click();

そして、これは私の注目の投稿コード全体で、適切に表示されています (現在のところ、細かいスタイリングのほとんどを差し引いたものです) が、jQuery の影響を受けていません。div があり、すべて正しく設定されていると思いますが、まだ機能していません... -

<div id="featured-navigation">
<?php
$featuredPostThumbs = new WP_Query();
$featuredPostThumbs->query('showposts=4&cat=9');
while ($featuredPostThumbs->have_posts()) : $featuredPostThumbs->the_post(); ?>
<a title="<?php the_title(); ?>" href=
<?php if( $featuredPostThumbs->current_post == 0 ) : ?>
"#featured-first"
<?php endif; 
if( $featuredPostThumbs->current_post == 1 ) : ?>
"#featured-second"
<?php endif; 
if( $featuredPostThumbs->current_post == 2 ) : ?>
"#featured-third"
<?php endif; 
if( $featuredPostThumbs->current_post == 3 ) : ?>
"#featured-fourth"
<?php endif; ?> >
<?php the_post_thumbnail( 'featured_thumb' ); ?>
</a>

<?php endwhile; 
wp_reset_postdata(); ?>
</div>
<div id="featured-post" class="clearfix">
<?php

$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=4&cat=9');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>

<?php if( $featuredPosts->current_post == 0 ) : ?>
<div id="featured-first" style="display: block;">
<?php endif; 
if( $featuredPosts->current_post == 1 ) : ?>
<div id="featured-second" style="display: none;">
<?php endif; 
if( $featuredPosts->current_post == 2 ) : ?>
<div id="featured-third" style="display: none;">
<?php endif; 
if( $featuredPosts->current_post == 3 ) : ?>
<div id="featured-fourth" style="display: none;">
<?php endif; ?>
<div id="featured-left">
<?php the_post_thumbnail( 'featured' ); ?>
<h2><?php the_title(); ?></h2>
</div>
<div id="featured-right">
<?php the_excerpt(); ?>
<!-- by <?php the_author() ?> -->
<?php the_time('F jS, Y') ?>
</div>
</div>

<?php endwhile; 

wp_reset_postdata(); ?>
</div>

そして、これは私のテスト サイトで、すべてをいじっています。現在、未完成のものがたくさんありますが、今のところ助けが必要なのは、この jQuery を機能させることだけです。 test.glutenfreemakeupgal.com/

よろしくお願いします！

4

3 に答える 3

0

すべての有益な返信のおかげで、私はついにそれを理解しました！そして、それは機能しています！これが私のfunctions.jsの新しい完全な内容です-

(function ($) {
$(document).ready(function() {

/* Featured Rotation */

var featuredContainer = $('div#featured-post > div');
featuredContainer.hide().filter(':first').show();

$('div#featured-navigation > a').click(function () {

    featuredContainer.hide();
    featuredContainer.filter(this.hash).show();
    $('div#featured-navigation > a').removeClass('selected');
    $(this).addClass('selected');
    return false;

}).filter(':first').click();

});
}(jQuery));

私はここでこの答えに奇妙な開始タグを見つけました-TypeError：'undefined'は関数ではありません（'$（document）'を評価します）なぜ彼らがこれをしなければならなかったのか100％わかりませんが、それはちょうどうまくいくようです大丈夫。

どうもありがとうございました！15担当者になり次第、回答を増やします。非常に役に立ちました。私は何日もこれを理解するのに苦労してきました、そしてあなたはついに私を私ができる場所に連れて行ってくれました。ありがとうございました！あなたはロック！：D

于 2013-03-14T03:19:55.380 に答える
0

jQuery は、$(document).ready への呼び出し内に配置する必要があります。そうしないと、まだ作成されていない可能性のある要素にクリック イベントをバインドしようとしています。

そのようです：

$(document).ready(function() {
  var featuredContainer = $('div#featured-post > div');
  featuredContainer.hide().filter(':first').show();

  $('div#featured-navigation > a').click(function () {

    featuredContainer.hide();
    featuredContainer.filter(this.hash).show();
    $('div#featured-navigation > a').removeClass('selected');
    $(this).addClass('selected');
    return false;

  }).filter(':first').click();
});
于 2013-03-13T17:35:23.860 に答える
0

:でスクリプト エラーが発生しfunctions.jsますTypeError: 'undefined' is not a function (evaluating '$')。

jQuery のオーバーライドを台無しにしたようです$。についてのjQueryドキュメントをご覧になりました$か？http://api.jquery.com/jQuery.noConflict/を参照してください。

于 2013-03-13T17:37:38.697 に答える