Here is the HTML element stack that I am working with:
<div class="btn-group btnSortAssType" data-toggle="buttons">
<label class="btn ink-reaction btn-primary active">
<input type="checkbox" value="m">Model
</label>
<label class="btn ink-reaction btn-primary active">
<input type="checkbox" value="n">Assignment
</label>
<label class="btn ink-reaction btn-primary active">
<input type="checkbox" value="p">Multi
</label>
</div>
The buttons above are not mutually exclusive, so I am handling array operations and showing/hiding elements accordingly.
$('.btnSortAssType').on('click', function (event) {
let $allLables;
var assTypeToShow = [];
$(`.top-row`).hide();
setTimeout(function () {
$allLables = $('.btnSortAssType label.active');
$allLables.each((index, label) =>{
$(`.top-row[assignment_type="${$(label).find('input').val()}"]`).show();
});
})
});
In the JavaScript code above, you may notice the use of setTimeout(). This is because without it, the last click might be missed. If 2 out of 3 elements are active and you click on the last inactive one, it will still show 2 active elements.
This issue seems to be related to event timing between my code and bootstrap.js. It appears that the method setting the element as active in Bootstrap somehow occurs after my code runs. By using setTimeout(), I ensure that my code waits for any previous events to finish before executing (essentially a null delay).
Although the implementation with setTimeout() works seamlessly, I believe there might be a better way to handle this situation without resorting to this "hack". I would appreciate any insights or suggestions on how to improve this. Thank you for your help!
Best regards, Bud