1

我在 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 只读链接

4

1 回答 1

0

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

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

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

如果没有看到您的其余代码和 HTML，很难准确地说，但类似于：

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

等等。

于 2020-04-29T21:02:23.873 回答