Как создать функцию переключения с несколькими переменными больше, чем просто открыть / закрыть? - PullRequest
Новая
       21

Как создать функцию переключения с несколькими переменными больше, чем просто открыть / закрыть?

0 голосов
/ 21 апреля 2020

У меня есть небольшая программа, которая включает в себя таблицу со строками, каждая строка содержит изображение «я». Если щелкнуть «i» рядом с элементом, откроется более подробный вид элемента, при повторном нажатии «i» элемента SAME следует закрыть более подробный вид ( Ваш универсальный c функция переключения). Однако мне нужно иметь дополнительную функциональность, чтобы при нажатии на «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();
        }
      }
    }
  }`

Поэтому я подумал, что могу сохранить идентификатор каждой строки (каждый tr имеет уникальный идентификатор) а затем сравните два идентификатора. Если подробный вид открыт и идентификаторы совпадают, закройте подробный вид. Если подробный вид открыт и идентификаторы отличаются, оставьте подробный вид открытым. Если подробный вид скрыт, просто сделайте его видимым. Я пытаюсь сделать это во второй функции, но я сталкиваюсь с некоторыми проблемами. А именно, я просто не знаю, как сохранить предыдущий и текущий идентификатор элемента, чтобы проверить их. 

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();
      }
    }
  }`

Спасибо всем, кто может помочь!

1 Ответ

0 голосов
/ 22 апреля 2020

Ответ выше работал, однако моя проблема была с моей переменной областью. Мне нужно было инициализировать мой «предыдущий» элемент вне моей функции. 

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