Question

我正在使用一些jquery创建一个简单的交互式地图，但我不确定它是如何正确的。

我在地图上有一个标志列表，当用户点击一个标志（即法国）时，一个精选帖子缩略图将出现在一个div（法国div）中，如果他们再次点击它就会消失。对我来说问题是当“法国”div显示并且我点击一个新标志即。巴西我无法用“巴西”div取代“法国”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>

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

感谢您的帮助

Answer 1

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

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

这一行将隐藏所有以“帖子”结尾的div，这些div看起来对你有用 - ＆gt; $('[class$=posts]').hide();

还有其他更好的方法可以解决这个问题，比如拥有posts和flags类，并使用数据对象来跟踪点击哪个元素，这有助于减少代码，但是以上是快速解决方案。

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

Answer 2

谢谢我让它使用这段代码：

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

使用jQuery在交互式地图上显示和隐藏元素

2 个答案: