Javascript Mirror'Current'选项卡到另一个选项卡

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

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

如果按照您的建议反向复制此代码，则在单击相应的容器产品后，也会在预制产品上自动单击/点击。因此，这些共同构成了永无止境的点击循环，我想一切都会破裂。

我建议您使用一对产品上的click / tap事件只是为了直接对相关元素的类进行更改，而不是单击某个产品会触发相应产品的自动click / tap。我将避免触发其他单击/轻击事件，这样做将避免此类递归问题。并且，就像您要在一对对应的产品上切换同一个类一样，可以对两者应用相同的功能，以避免重复代码。

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

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

依此类推。

Javascript Mirror'Current'选项卡到另一个选项卡

我已经在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>

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