заменить кучу шоу / скрыть с переключателем / регистр в JavaScript - PullRequest
Новая
       11

заменить кучу шоу / скрыть с переключателем / регистр в JavaScript

2 голосов
/ 29 марта 2010

Страница содержит пункты меню, которые заменяют 'div id = foo_ (текущий элемент меню)' на 'div id = foo_ (выбранный пункт меню)' в 'div class = foo'

Вот то, что у меня есть, и постарайтесь подавить ваш завтрак ... 

    $('#t1').click(function() {
        $('#attorney').show();
        $('#insurance,#financial,#estate,#trust,#death').hide();
    });

    $('#t2').click(function() {
        $('#insurance').show();
        $('#attorney,#financial,#estate,#trust,#death').hide();
    });

    $('#t3').click(function() {
        $('#financial').show();
        $('#attorney,#insurance,#estate,#trust,#death').hide();
    });

    $('#t4').click(function() {
        $('#estate').show();
        $('#attorney,#insurance,#financial,#trust,#death').hide();
    });

    $('#t5').click(function() {
        $('#trust').show();
        $('#attorney,#insurance,#financial,#estate,#death').hide();
    });

    $('#t6').click(function() {
        $('#death').show();
        $('#attorney,#insurance,#financial,#estate,#trust').hide();
    });

1 Ответ

2 голосов
/ 29 марта 2010

Операторы Switch довольно уродливы. 

var things = ['attorney', 'estate', 'insurance', 'financial', 'trust', 'death'];
var guide = {
  t1: 'attorney', t2: 'estate', t3: 'insurance', t4: 'financial', t5: 'trust', t6: 'death'
};

$('#t1, #t2, #t3, #t4, #t5, #t6').click(function() {
  var clicked = $(this).attr('id');
  $.each(things, function(_, thing) {
    var $thing = $('#' + thing);
    if (guide[clicked] == thing) $thing.show(); else $thing.hide();
  });
});

Вы можете также рассмотреть возможность установки обработчика событий с помощью live() вместо того, чтобы напрямую указывать на "t" штуковины, какими бы они ни были. Также было бы лучше, если бы всем «вещам» (адвокату и т. Д.) Можно было дать имя класса, потому что тогда вы могли бы просто быстро скрыть их все в обработчике кликов с помощью 

   $('.thingClass').hide();

, а затем просто сделайте видимым тот, который соответствует вкладке, на которую вы нажали. Тогда это может выглядеть примерно так: 

var guide = {
  t1: 'attorney', t2: 'estate', t3: 'insurance', t4: 'financial', t5: 'trust', t6: 'death'
};
$('#t1, #t2, #t3, #t4, #t5, #t6').click(function() {
  $('.thingClass').hide();
  $('#' + guide[$(this).attr('id')]).show();
});

Наконец, вы можете рассмотреть возможность использования одного из доступных плагинов для вкладок jQuery: -)

...