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

Question

我在 Webflow 中创建了一个可以工作的小部件，但 UX 设计并不是最好的，为了让我创造更好的体验，我需要一些 js 的帮助。 这是小部件的一个小概述，所以你明白我的意思：

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

小部件的 Gif

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

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

它应该如何工作

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

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

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

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

编辑： 这是我的 Webflow 只读链接

Answer 1

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

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

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

如果没有看到代码的 rest 和 HTML，就很难准确，但类似：

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

等等。