I’ve three dropdowns.. When i click on the div with the data-column=”1″ ( Momentum Jeans Shorts ), I want the current dropdown to remove the “active” & “disable” class for the data-column=”1″ (Momentum Shorts) and also add the “disable” & “active” class on the selected div which is the data-column=”1″ ( Momentum Jeans Shorts )..
On my second dropdown, I would want the data-column=”1″ (Momentum Shorts) to not have the “disable” & “active” class. data-column=”2″ ( Momentum Jeans Shorts ) would have the “disable” class.
I’ve tried to work on this many hours but I cant seems to get the algorithm right.. I’ve attached a screenshot of the dropdowns, and hopefully you get what I’m trying to achieve
$(function() {
$(".compare-filter-item").on("click",function() {
const column_value = $(this).attr("data-column");
const selected_data_product = $(this).attr("data-product");
$('.compare-filter-item[data-product="' + selected_data_product + '"][data-column="' + column_value + '"]').parent().parent().find(".active.disable").removeClass("active disable");
$("[data-product='" + selected_data_product + "']").addClass("disable");
$(this).addClass("active");
const myarray = $(`.compare-all .compare-products [data-product="${selected_data_product}"]`).map(function() {
return $(this).html();
});
$(`.compare-main .compare-products [data-column="${column_value}"]`)
.each(function(i) { $(this).html(myarray[i]) });
});
});