Question

我正在反向设计一些jQuery代码，我发现它确实完全符合我的要求。它应该更改已被点击到class="selected"的#features-导航中的缩略图，而未点击的其他缩略图只是class=""。它还应该将#features-post中的连接帖子（与缩略图的href相同）更改为style="display: block;"，而其他帖子为style="display:none;"。

我对jQuery了解得足以知道它很简单，但我不知道它是如何工作的以及我应该如何使用它。 Yeeeeah，我对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/

提前多多谢谢你！

Answer 1

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();
});

Answer 2

我在functions.js：TypeError: 'undefined' is not a function (evaluating '$')中收到了一个脚本错误。

看起来你搞砸了jQuery $。您是否看过关于$的jQuery文档？见http://api.jquery.com/jQuery.noConflict/

Answer 3

感谢所有有用的回复，我终于明白了！这是工作！这是我的函数的新完整内容.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' is not a function (evaluating '$(document)')我不是100％明白为什么他们必须这样做，但它看起来确实很好。

再次感谢你，你们！一旦我达到15个代表，我就会提高你的答案，因为他们非常有用。几天来我一直在努力解决这个问题，你终于让我到了我能去的地方。谢谢！你摇滚！：d

jQuery代码添加/删除类和更改显示不起作用？

3 个答案: