0

いくつかの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>

これが少し曖昧な場合は申し訳ありません。

ご協力いただきありがとうございます

4

2 に答える 2

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 に答える
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();

postsandクラスを持ち、データ オブジェクトを使用してクリックされている要素を追跡するなど、これを処理するための他のより良い方法がありflagsます。これはコードの削減に役立ちますが、上記は簡単な解決策です。

古いフラグをフェードアウトさせたい場合はhide()、fadeOut()

于 2012-04-12T17:15:06.243 に答える