用 JavaScript 中的 switch/case 替换一堆显示/隐藏

Question

页面的菜单项将在“div class=foo”中将“div id=foo_(当前菜单项)”替换为“div id=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();
    });

Answer 1

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 选项卡插件之一为您处理整个事情:-)