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

Question

I've created a widget in Webflow that works but the UX design isn't the greatest and in order for me to create a better experience I need help with some js. Here's a little overview of the widget so you see what I mean:

The goal of the widget is to allow users to a) browse our product categories and continue to view product options b) view the aesthetic differences between our offered building types (prefab and container) while also allowing the user to compare building types for each category by following the "compare" CTA

Gif of Widget

We have 5 product categories in 2 different building types: prefab and container. I have 2 tabs to switch between the building types and then inside of those tabs content, I have 5 category tabs: Living space, portable offices, utility, recreation, and storage. Those tabs' contents are the image and CTAs on the left.

My problem is the user's selected product category doesn't mirror over to the other building type. For example if you've selected office spaces on the prefab tab and switch over to the container tab, a completely different product category will be selected.

How it Should work

I was able to mirror the selected prefab product category over to the container tab using this basic logic:

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

Now, this works but when I try to add the opposite (selected products on the container tab mirror to the prefab side) everything breaks. Why is this? How can I fix it?

PS This is literally my second time touching js so the code is probably far from best practice. I'm a UX designer trying to branch out into development so if you have any advice I'd love to read it.

Edit: Here's my Webflow read-only link

Answer 1

Your code above makes an automatic click/tap occur on a container product just after a click occurs on the corresponding prefab product using the trigger method.

If you replicate this code in reverse as you suggest, an automatic click/tap will also occur on a prefab product just after a click on the corresponding container product. So— together these would create a never-ending recursive loop of clicks and I would imagine that everything would break.

Instead of a click on one product triggering an automatic click/tap on the corresponding product, I suggest you use the click/tap events on a pair of products only to make changes directly to the classes on the relevant elements. I would avoid triggering additional click/tap events and in doing so you will avoid such recursive problems. And, as it looks like you are toggling the same class on the pair of corresponding products, you can apply the same function to both to avoid duplicating code.

It's hard to be precise without seeing the rest of your code and the HTML, but something like:

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

And so on.