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

我有4个divs和4个相应的按钮。当你点击button1时，它会显示div 1并隐藏所有其他的。等等等等。而不是必须列出所有div来隐藏，我可以只隐藏所有其他divs类型的字符串吗？不隐藏页面上的每个div，但隐藏每个#div（数字）。简化此JavaScript文件的方法？ jQuery显示/隐藏？

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

来源

2013-02-15 stevenmorgan94

如果您可以提供HTML，那么这会更容易 – darshanags 2013-02-15 18:09:42

您是否可以向要隐藏和显示的所有DIV添加一个类？这样，你可以隐藏所有具有该类的div，然后显示应该显示的div。 – Andorbal 2013-02-15 18:10:31

不相关，但您应该使用.on（）而不是.live（）。据了解，它的性能相当差。 – 2013-02-15 18:22:35

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

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

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

来源

2013-02-15 18:12:00

您可以使用类隐藏，并使其成为动态的，您可以使用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-15 18:14:38

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

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

来源

2013-02-15 18:23:26 mhps

只有当按钮位于其中时才会显示div，但无法隐藏其余部分。 – 2013-02-15 18:36:14

这是我尝试

$(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-15 18:28:25 Danny

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

回答

相关问题