0

我有 4 个 div 和 4 个相应的按钮。当您单击 button1 时，它显示 div 1 并隐藏所有其他。如此等等。而不是必须列出所有要隐藏的 div，我可以只使用一个“隐藏所有其他 div”类型的字符串吗？不是隐藏页面上的每个 div，而是隐藏每个#div(number)。

$(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

使用一些正则表达式来收听所有链接

$('body').on("click", "[id^="lnk"]", function(event){
   $(this).parent().show();
});
于 2013-02-15T18:23:26.223 回答
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

您可以在所有这些 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 回答