1

用我的小提琴，我让它在加载时突出显示一个主菜单按钮，并在底部设置了 show() 和 hide() 相应的按钮。

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

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

$('.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;
    }
});
4

2 回答 2

2

$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;
}
});

在这里摆弄

更新

为了减少代码......你可以使用兄弟姐妹（）。

 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;
}

更新的小提琴

于 2013-07-15T04:52:03.730 回答
1

($this)没有分配是错误的，而是使用this.id

你可以使用确实喜欢

var id = this.id;
switch (id)

并在您的情况下删除#并制作如下

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

工作小提琴

于 2013-07-15T04:51:39.623 回答