在JQuery中使用switch语句时，如何将元素数据传递到案例中？

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语句？

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");