Question

我有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-->

Answer 1

你可以在所有这些div上添加一个类（比如说“divGroup”）然后做这样的事情：

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

$("#lnk56").live('click', showIt());
... repeat for all divs ...

Answer 2

您可以使用类隐藏并使其动态化，您可以使用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>
...

Answer 3

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

$('body').on("click", "[id^="lnk"]", function(event){
   $(this).parent().show();
});

Answer 4

这是我的尝试

$(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，我将假设这是意图。

一种简化此JavaScript文件的方法？ jQuery显示/隐藏？

4 个答案: