0

我正在使用一些 jquery 制作一个简单的交互式地图，但我不确定如何正确地完成它。

我在地图上有一个标志列表，当用户单击一个标志（即法国）时，一个特色帖子缩略图将出现在一个 div（法国 div）中，如果他们再次单击它，它将消失。我的问题是当“法国” div 显示时，我点击了一个新标志，即。巴西 我不能用“巴西”div 替换“France”div。

jQuery：

$(document).ready(function() {
    $('.france-posts').hide();
    $('#france_flag').click(function() {
        $('.france-posts').fadeIn(1000);
    });

    $('.brazil-posts').hide();
    $('#brazil_flag').click(function() {
        $('.laos-posts').fadeIn(1000);
    });

    $('.ireland-posts').hide();
    $('#ireland_flag').click(function() {
        $('.laos-posts').fadeIn(1000);
    });
});

HTML：

<div id="france">
    <ul id="flags">
        <li id="france_flag" onclick="" ></li>
    </ul>
</div>

<div id="brazil">
    <ul id="flags">
        <li id="brazil_flag" onclick="" ></li>
    </ul>
</div>

<div id="ireland">
    <ul id="flags">
        <li id="ireland_flag" onclick="" ></li>
    </ul>
</div>

<div class="flag-posts">
    <div class="france-posts">
        <?php query_posts(array('category__in' => array(4), 'posts_per_page' => 4)); ?>
            <a href="<?php the_permalink(); ?>">
                <?php echo get_the_post_thumbnail($currentid, array(120, 100)); ?>
            </a>
        <?php endwhile; endif; wp_reset_query(); ?>
    </div>

    <div class="brazil-posts">
        <?php query_posts(array('category__in' => array(5), 'posts_per_page' => 4)); ?>
            <a href="<?php the_permalink(); ?>">
                <?php echo get_the_post_thumbnail($currentid, array(120, 100)); ?>
            </a>
        <?php endwhile; endif; wp_reset_query(); ?>                
    </div>

    <div class="ireland-posts">
        <?php query_posts(array('category__in' => array(6), 'posts_per_page' => 4)); ?>
            <a href="<?php the_permalink(); ?>">
                <?php echo get_the_post_thumbnail($currentid, array(120, 100)); ?>
            </a>
        <?php endwhile; endif; wp_reset_query(); ?>
    </div>
</div>

对不起，如果这有点模糊。

谢谢你的帮助

4

2 回答 2

0

如果我正确理解您的问题，您希望在单击新帖子时隐藏其他帖子。所以你可以这样做：

$(document).ready(function() {
    $('.france-posts').hide();
    $('#france_flag').click(function() {
        $('[class$=posts]').hide();
        $('.france-posts').fadeIn(1000);
    });

    $('.brazil-posts').hide();
    $('#brazil_flag').click(function() {
        $('[class$=posts]').hide();
        $('.laos-posts').fadeIn(1000);
    });

    $('.ireland-posts').hide();
    $('#ireland_flag').click(function() {
        $('[class$=posts]').hide();
        $('.laos-posts').fadeIn(1000);
    });
});

这一行将隐藏所有类以'posts'结尾的div，从它看起来对你有用->$('[class$=posts]').hide();

还有其他更好的方法来处理这个问题，例如使用postsandflags类并使用数据对象来跟踪正在单击的元素，这将有助于减少您的代码，但以上是快速解决方案。

如果您希望旧标志淡出，只需hide()将fadeOut()

于 2012-04-12T17:15:06.243 回答
0

谢谢我让它与这个代码一起工作：

$(document).ready(function() {
$('.laos-posts').hide();
$('#laos_flag').click(function() {
    $('.selected').fadeOut();
    $('.laos-posts').fadeIn(1000);
    $('.laos-posts').addClass("selected");
});

$('.vietnam-posts').hide();
$('#vietnam_flag').click(function() {
    $('.selected').fadeOut();
    $('.vietnam-posts').fadeIn(1000);
    $('.vietnam-posts').addClass("selected");
});

$('.indonesia-posts').hide();
$('#indonesia_flag').click(function() {
    $('.selected').fadeOut();
    $('.indonesia-posts').fadeIn(1000);
    $('.indonesia-posts').addClass("selected");
   });
});
于 2012-04-13T01:39:55.603 回答