如何创建一个比openclose多一些变量的toggle函数？

Question

我有一个小程序，其中包括一个带行的表格，每一行都包含一个'i'图像。当你点击元素旁边的'i'时，它会打开该元素更详细的视图，当你再次点击'i'的 SAME 元素，它应该关闭更详细的视图（您的通用切换功能）。然而，我需要有额外的功能，当你点击不同元素的 "i "时，它不会关闭详细视图，而只是更新右侧。这一部分我已经能够工作了（第一个功能），但我遇到的问题是，当你点击不同元素的 "i "时，它不会关闭详细视图，而只是更新右侧。我遇到的问题是，如果点击了相同的'i'，那么关闭详细视图。

function toggleDetailsView() {
    let parentId;
    if (dom.$detailsView.is(':hidden')) {
      showDetailsView();
      parentId = $(this).parent('tr').get(0).id;
    } else {
      if (parentId) {
        console.log(parentId);
        if (parentId !== $(this).parent('tr').get(0).id) {
          hideDetailsView();
        }
      }
    }
  }`

因此，我想我可以存储每行的id（每个tr都有一个唯一的id），然后比较两个id。如果详细视图是打开的，而且id是一样的，就关闭详细视图。如果详细视图是打开的，并且id不同，则保持详细视图打开。如果详细视图是隐藏的，就把它变成可见的。我正在尝试在第二个函数中这样做，但我遇到了一些问题。也就是说，我只是不知道如何存储元素的prev和当前id来对照检查。

function toggleDetailsView() {
    const initialParentId = $(this).parent('tr').get(0).id;
    let nextParentId;
    if (dom.$detailsView.is(':hidden')) {
      showDetailsView();
    } else if (dom.$detailsView.is(':visible')) {
      nextParentId = $(this).parent('tr').get(0).id;
      if (nextParentId === initialParentId) {
        hideDetailsView();
        } else if (nextParentId !== initialParentId) {
        showDetailsView();
      }
    }
  }`

感谢任何能够帮助我的人

Answer 1

上面的答案是可行的，但是我的问题是我的变量范围。我需要在我的函数之外初始化我的'上一个'元素。

let previousId = null;

function toggleDetailsView() {
    const currentId = event.target.closest('tr').id;
    if (dom.$detailsView.is(':hidden')) {
      showDetailsView();
    }
    else if (dom.$detailsView.is(':visible')) {
      if (previousId === currentId) {
        hideDetailsView();
      }
    }
    previousId = currentId;
  }