Question

使用我的fiddle，我在加载主菜单按钮时突出显示，并在底部显示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;
    }
});

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

<强>更新

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

 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

Answer 2

如果没有分配，

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

工作fiddle

jQuery - 在按钮点击时触发show（），hide（）

2 个答案: