如何创建一个切换 function 的变量，而不仅仅是打开/关闭？

Question

我有一个小程序，其中包含一个带有行的表，每行包含一个“i”图像。 当您单击元素旁边的“i”时，它将打开该元素的更详细视图，当您再次单击SAME元素的“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 不同，请保持详细视图打开。 如果详细视图被隐藏，只需使其可见。 我试图在第二个 function 中这样做，但我遇到了一些问题。 也就是说，我只是不确定如何存储元素的 prev 和 current 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

上面的答案有效，但我的问题是我的变量 scope。 我需要在我的 function 之外初始化我的“上一个”元素。

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