0

我正在对我发现的一些 jQuery 代码进行逆向工程，这正是我想要的。它应该更改 #featured-navigation 中已单击的缩略图，class="selected"而其他未单击的只是class="". 它还应该将 #featured-post 中的已连接帖子（与缩略图的 href 相同的 ID）更改为，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/

非常感谢你！

4

3 回答 3

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 回答
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' is not a function (evalating '$(document)')我不 100% 明白为什么他们必须这样做，但它似乎确实有效美好的。

再次感谢你们，你们！！一旦我达到 15 个代表，我就会提高你的答案，因为它们非常有帮助。几天来我一直在努力解决这个问题，你终于把我带到了我能做到的地方。谢谢！你摇滚！！:D

于 2013-03-14T03:19:55.380 回答