jQuery - 单击按钮时触发 show(),hide()

Question

与我的fiddle ，我让它在加载时突出显示主菜单按钮之一，并在底部设置相应的按钮。

我认为错误但无法弄清楚自己是在我的 switch 语句中执行 $this 变量的引用范围的事情。就我而言， $this 指向单击的按钮值，我认为该值是类的名称，但在我的 switch 语句中，我不确定是否可以引用 $this 中的 id 名称。我想我的问题是 $this 在我的场景中具有什么值(value)？

很高兴看到一个工作示例，可能需要更少的代码，因为我可以看到许多可以简化的重复项。

$('.menu').click(function () {
    if ($(this) != $('.highlight')) {
        $(this).addClass('highlight')
            .siblings('.menu')
            .removeClass('highlight');
    }
    switch ($this) {
        case '#dateMenu':
            $('.date-chart').show();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case '#jcMenu':
            $('.date-chart').hide();
            $('.jc-chart').show();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case '#jpMenu':
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').show();
            $('.ws-chart').hide();
            break;
        case '#wsMenu':
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').show();
            break;
    }
});

Answer 1

$this 应该是 $(this) ...这是对当前元素的引用...因为您正在检查 id。使用 prop() 。

 switch ($(this).prop('id')) {  or  switch (this.id) { ...

并从案例中删除#

试试这个

 $('.menu').click(function () {
if (!$(this).hasClass('.highlight'))) {
    $(this).addClass('highlight')
        .siblings('.menu')
        .removeClass('highlight');
}

switch ($(this).prop('id')) {
    case 'dateMenu':
        $('.date-chart').show();
        $('.jc-chart').hide();
        $('.jp-chart').hide();
        $('.ws-chart').hide();
        break;
    case 'jcMenu':
        $('.date-chart').hide();
        $('.jc-chart').show();
        $('.jp-chart').hide();
        $('.ws-chart').hide();
        break;
    case 'jpMenu':
        $('.date-chart').hide();
        $('.jc-chart').hide();
        $('.jp-chart').show();
        $('.ws-chart').hide();
        break;
    case 'wsMenu':
        $('.date-chart').hide();
        $('.jc-chart').hide();
        $('.jp-chart').hide();
        $('.ws-chart').show();
        break;
}
});

fiddle here

已更新

为了减少代码...您可以使用siblings()。

 switch ($(this).prop('id')) {
    case 'dateMenu':
        $('.date-chart').show().siblings().hide();

        break;
    case 'jcMenu':

        $('.jc-chart').show().siblings().hide();

        break;
    case 'jpMenu':

        $('.jp-chart').show().siblings().hide();

        break;
    case 'wsMenu':

        $('.ws-chart').show().siblings().hide();
        break;
}

updated fiddle