javascript - 为什么在jquery函数中调用css时没有应用css

Question

我实现了一个切换网格/列表视图。我使用这个 HTML 和 jQuery 代码调用这些视图：

当我从 html 代码调用此函数时，它工作正常，单击a链接。

当我ideaView从另一个 jquery 函数调用该函数时，问题就发生了。在这种情况下，不应用 CSS 格式。

例如，当用户进行搜索时，我需要调用此函数以根据用户选择的视图显示结果，但它不起作用：

我不确定我是否清楚，我已经尽力了。提前谢谢。

$('a#list-view').click(function() {
  localStorage.setItem("ideaView", "1");
  ideaView(localStorage.getItem("ideaView"));
});

$('a#grid-view').click(function() {
  localStorage.setItem("ideaView", "0");
  ideaView(localStorage.getItem("ideaView"));
});

function ideaView(ideaView) {
  if (ideaView == 1) {
    $('#idea-list-group').removeClass('card-columns');
    $('.idea-cards').css('flex-direction', 'row');
    $('.idea-cards').addClass('mb-2');
  } else {
    $('#idea-list-group').addClass('card-columns');
    $('.idea-cards').css('flex-direction', 'column');
    $('.idea-cards').removeClass('mb-2');
  }
}

function searchIdea(event, form) {
  event.preventDefault();
  var $form = form;
  ....
  ideaView(localStorage.getItem("ideaView"));
}

<div class="row">
  <a id="list-view" href="#"><i class="fas fa-list-ul"></i> </a>
  <a id="grid-view" href="#"><i class="fas fa-th"></i> </a>
</div>

标签： javascriptjquery