Нужна помощь в упрощении кода - PullRequest
Новая
       9

Нужна помощь в упрощении кода

4 голосов
/ 27 апреля 2011

Хорошо, у меня есть страница по установке 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, кроме одного, по умолчанию скрыт: 

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

Ответы [ 3 ]

2 голосов
/ 27 апреля 2011

Лучшее решение, просто дайте все классы, которые вам нужны, чтобы скрыть собственный класс и используйте .toggle ().

1 голос
/ 12 мая 2011

Хорошо, вот что я в итоге сделал.В итоге я присвоил каждой ссылке класс linkdiv и относительное значение любого имени содержимого 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);

. После того, как это будет сделано, я просто проверил, по какой ссылке они щелкнули, и на основании этого я спрятал или показал div на основессылка rel: 

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

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 27 апреля 2011

Второй раздел можно сократить до: 

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