0

4 つの div と、対応する 4 つのボタンがあります。button1 をクリックすると、div 1 が表示され、他のすべてが非表示になります。などなど。非表示にするすべての div をリストする代わりに、「他のすべての div を非表示」のような文字列を使用できますか? ページ上のすべての div を非表示にするのではなく、すべての #div(数値) を非表示にします。

$(document).ready(function() {
var h1 = $("#div56").height();
var h2 = $("#div54").height();
var h3 = $("#div47").height();
var h4 = $("#div45").height();
$("#div56,#div54,#div47,#div45").height(… h2, h3, h4));
$("#div54,#div47,#div45").hide();
});

$("#lnk56").live('click', function() {
$("#div56").show();
$("#div54,#div47,#div45").hide();
});
$("#lnk54").live('click', function() {
$("#div54").show();
$("#div56,#div47,#div45").hide();
});
$("#lnk47").live('click', function() {
$("#div47").show();
$("#div56,#div54,#div45").hide();
});
$("#lnk45").live('click', function() {
$("#div45").show();
$("#div56,#div54,#div47").hide();
});

これは、対応する HTML/PHP です。

    <div class="grid_5">

        <?php query_posts( 'post_type=credits&showposts=99999'); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div class="post">

<div class="buttons">
            <a id="lnk<?php the_ID(); ?>" href="#"><h5><?php the_title(); ?></h5></a>
</div><!--/buttons-->

<?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>

        </div>

        <?php endwhile; endif; ?>
</div><!--/grid_5-->

<div class="grid_7">
        <div class="scrollbox">
        <div id="divParent">

                <?php query_posts( 'post_type=credits'); ?>
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div class="info" id="<?php the_ID(); ?>">

                <?php the_content(); ?>

        </div>

        <?php endwhile; endif; ?>


                </div><!--/divParent-->
       </div>
        </div><!--/grid_7-->
4

4 に答える 4

0

これが私の試みです

$(document).ready(function () {
    $('button[id^="lnk"]').on('click', function () {
        $('div[id^="div"]').hide();
        var id = $(this).attr('id').substring(3);
        $('#div' + id).show();
    });
});

これは、ID が で始まるすべてのボタンに影響しますlnk。ただし、動作するhtmlがないため、それが意図であると想定します。

于 2013-02-15T18:28:25.307 に答える
0

いくつかの正規表現を使用して、すべてのリンクをリッスンします

$('body').on("click", "[id^="lnk"]", function(event){
   $(this).parent().show();
});
于 2013-02-15T18:23:26.223 に答える
0

これらすべての div にクラス (「divGroup」など) を追加してから、次のようにすることができます。

function() {
    $("div.divGroup").hide();
    this.show();
}

$("#lnk56").live('click', showIt());
... repeat for all divs ...
于 2013-02-15T18:12:00.520 に答える
0

クラスを使用して非表示にし、動的にすることができます。data-* 属性を使用して、ボタンから正しい Id を取得し、対応する div を表示できます。この JSFiddle を参照してください: http://jsfiddle.net/V9ZZy/

$(document).on("click", "button", function(){
       var id = $(this).attr('data-btn-id');
       $(".myDivs").hide();
       $("#div" + id).show();
});


    <div id="div1" class="myDivs">Hello 1</div>
<button id="btn1" data-btn-id="1">Btn 1</button>

<div id="div2" class="myDivs">Hello 2</div>
<button id="btn2"  data-btn-id="2">Btn 2</button>

<div id="div3" class="myDivs">Hello 3</div>
<button id="btn3"  data-btn-id="3">Btn 3</button>
...
于 2013-02-15T18:14:38.330 に答える