Javascript 将“当前”选项卡镜像到另一个选项卡 |网络流

Question

我在 Webflow 中创建了一个可以工作的小部件，但 UX 设计并不是最好的，为了让我创造更好的体验，我需要一些 js 方面的帮助。以下是小部件的简要概述，以便您了解我的意思：

小部件的目标是让用户 a) 浏览我们的产品类别并继续查看产品选项 b) 查看我们提供的建筑类型（预制件和集装箱）之间的美学差异，同时还允许用户按照“比较”CTA 来比较每个类别的建筑类型

Gif of Widget

我们有 2 种不同建筑类型的 5 种产品类别：预制件和集装箱。我有 2 个选项卡可以在建筑类型之间切换，然后在这些选项卡内容中，我有 5 个类别选项卡：生活空间、便携式办公室、实用程序、娱乐和存储。这些选项卡的内容是左侧的图像和 CTA。

我的问题是用户选择的产品类别没有反映到其他建筑类型。例如，如果您在预制选项卡上选择了办公空间并切换到容器选项卡，则会选择完全不同的产品类别。

How it Should work

我能够使用以下基本逻辑将选定的预制产品类别镜像到容器选项卡：

<script>
//prefab
$(document).ready(function() {
  $('.livingprefab').click(function() {
    $(this).addClass('current');
    $('.livingcontainer').trigger('tap');
 });
  $('.storageprefab').click(function() {
    $(this).addClass('current');
    $('.storagecontainer').trigger('tap');
 });
  $('.utilityprefab').click(function() {
    $(this).addClass('current');
    $('.utilitycontainer').trigger('tap');
 });
  $('.officeprefab').click(function() {
    $(this).addClass('current');
    $('.officecontainer').trigger('tap');
 });
  $('.recprefab').click(function() {
    $(this).addClass('current');
    $('.reccontainer').trigger('tap');
 });
});
</script>

现在，这可行，但是当我尝试将相反的（容器选项卡镜像上的选定产品添加到预制侧）时，一切都会中断。为什么是这样？我该如何解决？

附：这实际上是我第二次接触 js，所以代码可能远非最佳实践。我是一名 UX 设计师，试图涉足开发领域，所以如果您有任何建议，我很乐意阅读。

编辑： Here's my Webflow read-only link

Answer 1

您的上述代码使用trigger 方法在相应的预制产品上发生点击后立即在容器产品上发生自动点击/点击。

如果您按照您的建议反向复制此代码，则在点击相应的容器产品后，预制产品上也会发生自动点击/点击。所以——它们一起会创建一个永无止境的点击递归循环，我想一切都会中断。

我建议您仅在一对产品上使用点击/点击事件来直接更改相关元素上的类，而不是点击一个产品触发相应产品的自动点击/点击。我会避免触发额外的点击/点击事件，这样做可以避免此类递归问题。而且，由于您似乎在相应产品对上切换相同的类，您可以对两者应用相同的函数以避免重复代码。

如果不查看您的其余代码和 HTML，很难准确，但类似：

function makeLivingCurrent() {
    $('.livingprefab').addClass('current');
    $('.livingcurrent').addClass('current');
}
$('.livingprefab, .livingcurrent').click( makeLivingCurrent ) 

等等。