需要帮助简化代码

Need help simplifying code

本文关键字：代码 帮助      更新时间：2023-09-26

好的，我有一个Drupal安装页面，它有多个div。我写了一个。js测试看看是否有任何信息在这些div 

if ($('.accred').length) {
    $('#accred').show();
}
else{
    $('#accred').hide();
}    
if ($('.admin-req').length) {
    $('#admis').show();
}
else{
    $('#admis').hide();
}    
if ($('.career-opp').length) {
    $('#career').show();
}
else{
    $('#career').hide();
}    
if ($('.co-op-diploma').length) {
    $('#co_op').show();
}
else{
    $('#co_op').hide();
}    
if ($('.prog-out').length) {
    $('#outcomes').show();
}
else{
    $('#outcomes').hide();
}    
if ($('.prog-struc').length) {
    $('#struc').show();
}
else{
    $('#struc').hide();
}    
if ($('.testimonials').length) {
    $('#testimon').show();
}
else{
    $('#testimon').hide();
}    
if ($('.transfer').length) {
    $('#transfer').show();
}
else{
    $('#transfer').hide();
}   
if ($('.tuition').length) {
    $('#tuition').show();
}
else{
    $('#tuition').hide();
}

隐藏或显示链接，这些链接允许您单击并显示每个div的更多信息，因为默认情况下每个div都是隐藏的:
$(function(){
  $('#descrip').click(function(){
     $('.prog-descrip').show();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#accred').click(function(){
     $('.prog-descrip').hide();
     $('.accred').show(); 
     $('.admin-req').hide();
 $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#admis').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').show();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#career').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').show(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#co_op').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').show(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#outcomes').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').show(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#struc').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').show(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#testimon').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').show(); 
     $('.transfer').hide(); 
     $('.tuition').hide(); 
  });
  $('#transfer').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').show(); 
     $('.tuition').hide(); 
  });
  $('#tuition').click(function(){
     $('.prog-descrip').hide();
     $('.accred').hide(); 
     $('.admin-req').hide();
     $('.career-opp').hide(); 
     $('.co-op-diploma').hide(); 
     $('.prog-out').hide(); 
     $('.prog-struc').hide(); 
     $('.testimonials').hide(); 
     $('.transfer').hide(); 
     $('.tuition').show(); 
  });
});
然而，客户端不喜欢这样做。他想根据是否有更多的div来填充。

所以，我的问题是这样的:我如何填充所有的div和代码显示/隐藏div基于他们使用js或jquery动态点击哪个链接?我不是一个js或jquery的家伙，所以原谅我天真的问题，如果它实际上是天真的。谢谢!

编辑

请重读我的问题那些已经回答。动态填充信息。换句话说，客户端不希望硬编码div。

更好的解决方案是，只需给所有需要隐藏自己的类的类并使用。toggle()。

好的，这就是我最后做的。我最终为每个链接分配了linkeddiv类，以及内容div的名称，如下所示:

<a href="#tuition" class="linkeddiv" rel="tuition">Tuition and Fees</a> 
<div class="prog-descrip prog-detail" style="display: none; ">

之后，我设置了一个间隔函数来测试页面的url，特别是抓取有标记之后的字符。这样做的目的是测试页面是否发生了更改，以防最终用户按下后退按钮。如果是这样，它会自动将页面更新为显示

的适当div。
setInterval(function() {
   // parse the url
   current_url = document.location.href;
   after_hash = current_url.split('#');
   if (after_hash[1] == null) {
       if ($('.prog-descrip').length) {
        $('.prog-detail').hide();
        $('.prog-descrip').show();
        $('#prog_link_block').show();
        $('#Program_Areas-1').hide();
       }
   } else {
       $('.prog-detail').hide();
       $('#Program_Areas-1').hide();
       $('.' + after_hash[1]).show();
   }
}, 100);

一旦完成，我只是测试他们点击了哪个链接，并基于此，我隐藏或显示基于rel链接的div:

$('.linkeddiv').each(function() {
    contentdiv = $(this).attr('rel');
    if ($('.' + contentdiv).length == 0) {
        $(this).hide();
    }
});
$('.linkeddiv').click(function() {
    $('.prog-detail').hide();
    contentdiv = $(this).attr('rel');
    $('.' + contentdiv).show();
});

这实现了我正在寻找的。此外，它还增加了使用后退按钮的功能，而不是指向死链接(#)。

你也可以做一些有趣的淡出或滑动如果你想用jquery。

第二部分可以缩短为:

$('.accred, .admin-req, .career-opp, .co-op-diploma, .prog-out, .prog-struc,
 .testimonials, .transfer, .tuition').hide(); 
//Show the one you want
相关文章：