The bug is that when I click one of the nodes sometimes the toggle class function will apply to all node elements, resulting this in a bug. It should only apply to the node element that triggers the event, which it does by the way.
The structure of the HTML is something like this:
<div class="table-body">
<div class="table__row">Some more elements nested here</div>
<div class="table__row">Some more elements nested here</div>
<div class="table__row">Some more elements nested here</div>
<div class="table__row">Some more elements nested here</div>
<div class="table__row">Some more elements nested here</div>
<div class="table__row">Some more elements nested here</div>
<div class="table__row">Some more elements nested here</div>
<div class="table__row">Some more elements nested here</div>
</div>
If you need any more details please let me know, this bug is driving me crazy.
Umm now that I think about I think this is happening because the active class is applying to the div with the class “table-body” if I happen to click the div with “table__row” class instead of one the nested child within this div.
As I suspected that’s exactly what’s going on, I tried this to find out:
Even though now the active class isn’t apply to the div with class “table-body”, this solution doesn’t fix my issue. What DOM element am I supposed to target here to make this work?
But I don’t think this is the finest solution because I am repeating myself and I think I will have to deal with this traversing DOM problem again, so any ideas of how you would do this is greatly appreciated!
toggleActiveClass applies a background-color to the parent of the selected element by applying an active class, and remove the same class from the rest of the divs if they have that class.
Here’s how the structure looks like in case you are wondering:
You can see that I have a lot a of nested elements within the div with the “table__row” class. I don’t think traversing the DOM to apply the active class is the best idea, because now Im running into another issue. If I click the span element with the class “slider”, now the active class will apply to its parent, which is the label, instead of the div with “table__row” class.
The first element was clicked and the active class was applied, but if I click the switch button the active class is removed from the div row, and I don’t want that to happen. But I know this is happening because I am traversing the DOM to apply this class.
When a row is clicked, then applies an active class to the selected row (that’s what the toggleActiveClass function is for):
But if I click on the switch button the active class is removed and I don’t want this behavior:
Or even worse, if I click where it says “On” or the percentage this happens:
As you probably might’ve guessed, I only want to apply the active class to the div row, and I don’t want to remove the class from the row if the switch button is selected. I know this is happening because I chose to apply this class traversing the DOM, do you think it would be better if I get the index of the row and apply the class to the div row based on its index?
Only the Balcony row, but you should know there’s a hover effect, that’s why the background color of the Balcony row is blue even when it no longer has the active class.
And in case you still have any doubts of what the toggleActiveClass function does, here’s an example:
Balcony was clicked, apply active class;
Living Room was clicked, remove active class from all other rows and applies active to this selected row.