javascript - 在JQuery中使用switch语句时如何将元素数据传递到case中？

Question

我的应用程序中有一个选项卡组件，我编写了一个在选项卡之间切换的函数。首先我想测试一下这是否有效。我过去曾尝试过使用 if 语句，效果很好(请参阅注释代码)。现在我想用 switch 语句尝试一下。这是我的函数代码:

switchAdvancedView(elem) {
    //if (elem.data('id') === 'recentview') {
    //    alert('view1');
    //}
    //else if (elem.data('id') === 'myview') {
    //    alert('view2');
    //}
    //else if (elem.data('id') === 'systemview') {
    //    alert('view3');
    //}
    switch (elem) {
        case elem.data('id') === 'recentview':
            alert('view 1');
            break;
        case elem.data('id') === 'myview':
            alert('view 2');
            break;
        case elem.data('id') === 'myview':
            alert('view 3');
            break;
        default:
    }
}

问题是当我单击选项卡时它不会触发警报功能。

我使用过这个来源:

链接:https://www.sitepoint.com/jquery-switch-statement/

教程仅显示硬编码值。

如何将 element.data id 传递给 switch 语句的 case？

Answer 1

默认开关格式如下所示:

function switchAdvancedView(text) {
  switch (text) {
    case 'recentview':
      alert('view 1');
      break;
    case 'myview':
      alert('view 2');
      break;
    case 'myview':
      alert('view 3');
      break;
    default:
  }
}

switchAdvancedView("recentview");

您还可以有更高级的条件，即:

function switchAdvancedView(text, otherFlag) {
  switch (text) {
    case otherFlag ? text : null :
      alert("OtherFlag is true");
      break;
    case 'recentview':
      alert('view 1');
      break;
    case 'myview':
      alert('view 2');
      break;
    case 'myview':
      alert('view 3');
      break;
    default:
  }
}

switchAdvancedView("recentview", true);

但是要使上面的示例正常工作，您需要确保这些类型的条件位于顶部，以便开关位于顶部(除非您想要特定的顺序)。

虽然我个人更喜欢这种格式而不是 switch 语句:

function switchAdvancedView(text) {
  ({
    recentview: () => alert("view 1"),
    myview: () => alert("view 2"),
    myview2: () => alert("view 3")
  }[text] || (_ => _))();
}

switchAdvancedView("recentview");