jQuery addClass example

Change class name on click in jQuery

by d0ublezer0

HTML

<div id="_sizes">
                <button class="s_close"></button>
                <p>Таблица размеров</p>
                <table id="_sizes_table">
                    <tr>
                        <th>Размер</th>
                        <th>Объем груди</th>
                        <th>Объем талии</th>
                        <th>Объем бёдер</th>
                    </tr>
                </table>
                <button id="_sizes_select">Выбрать размер</button>
            </div>
<form method="post" class="product js-recalculate" action="#" autocomplete="off">
        <div class="vm-customfields-wrap">
                <div class="product-fields">
                        <div class="d2 product-fields-title">Размер                    </div>
                        <div class="product-field product-field-type-S">
                                    <div class="product-field-display"><input type="radio" name="customProductData[700][34]" id="customProductData_700_46504646" value="4646" checked="checked"><label for="customProductData_700_46504646" id="customProductData_700_46504646-lbl" class="radio">XS </label><input type="radio" name="customProductData[700][34]" id="customProductData_700_46504647" value="4647"><label for="customProductData_700_46504647" id="customProductData_700_46504647-lbl" class="radio">S </label><input type="radio" name="customProductData[700][34]" id="customProductData_700_46504648" value="4648"><label for="customProductData_700_46504648" id="customProductData_700_46504648-lbl" class="radio">M </label><input type="radio" name="customProductData[700][34]" id="customProductData_700_46504649" value="4649"><label for="customProductData_700_46504649" id="customProductData_700_46504649-lbl" class="radio">L </label><input type="radio" name="customProductData[700][34]" id="customProductData_700_46504650" value="4650"><label for="customProductData_700_46504650" id="customProductData_700_46504650-lbl" class="radio">XL </label></div>            </div>
  ...

CSS

#_sizes_open:hover{
    color: #000;
    border-bottom-color: #000;
}
#_sizes_select{
    font-size: 1rem;
}
#_sizes_open{
    text-decoration: none !important;
    border-bottom: 1px dashed rgb(139, 139, 139);
    color: rgb(139, 139, 139);
    font-size: 1rem;
    cursor: pointer;
}
#_sizes_table tr:first-child,
#_sizes_table tr:hover{
    background-color: #f6f6f6;
    cursor: pointer;
}
#_sizes .s_close{
    /* display: inline-block; */
    width: 16px;
    height: 16px;
    position: absolute;
    top: 16px;
    right: 13px;
    cursor: pointer;
    margin: 0;
    background: none;
    border: none;
    min-width: 0;
    padding: 0;
}
#_sizes .s_close:before,
#_sizes .s_close:after{
    background: #999;
    content: '';
    position: absolute;
    display: block;
    width: 1px;

}
#_sizes{
    padding: 28px 40px 40px;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 10px 40px -30px rgba(0,0,0,0.5);
}
#_sizes .s_close:after{
    height: 20px;
    width: 2px;
    left: 7px;
    top: -2px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#_sizes .s_close:before{
    position: absolute;
    height: 20px;
    width: 2px;
    left: 7px;
    top: -2px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#_sizes p{
    font-size: 1.5rem;
    font-weight: 700;
}
#_sizes_table {
    width: 100%;
    margin-bottom: 20px;
}
#_sizes_table tr{
    border-radius: 3px;
    overflow: hidden;
    padding: 3px 0;
}
#_sizes_table tr.selected{
    background-color: #773686;
    color: #fff;
}
#_sizes_table th,
#_sizes_table td{
    padding: 0.4rem 1rem;
    text-align: center;
}

JavaScript

let jDoc = jQuery(document);
                let arrSizes = {
                    // размер, грудь, талия , бедра
                    'XS': ['74-82', '60-70', '84-90'],
                    'S': ['82-90', '60-70', '90-96'],
                    'M': ['90-98', '65-80', '96-103'],
                    'L': ['98-106', '65-80', '103-110'],
                    'XL': ['106-114', '70-85', '110-117']
                };
                let labels = jQuery(".product-field-display label");
                var currentKey;
                var forID;
                let rclass;
                let tbl = jQuery("#_sizes_table");
                jQuery.each(labels, function (index, element) {
                    currentKey = jQuery(this).text().trim();
                    forID = jQuery(this).prop("for");
                    if (jQuery("#" + forID).is(":checked")) rclass = "selected"; else rclass = "";
                    tbl.append("<tr class='" + rclass + "' for='" + forID + "'><td>" + currentKey + "</td><td>" + arrSizes[currentKey][0] + "</td><td>" + arrSizes[currentKey][1] + "</td><td>" + arrSizes[currentKey][2] + "</td></tr>");
                });

                jDoc.ready(function () {
                    jDoc.on("click", "#_sizes_open", function () {

                    });
                    jDoc.on("click", "#_sizes_table td", function () {
                        jQuery(this).parent().addClass("selected").siblings().removeClass("selected");
                    });
                    jDoc.on("click", "#_sizes_select", function () {
                        jQuery("#sizes_table tr").each(function(){
                           if (jQuery(this).hasClass("selected")) console.log(jQuery(this).prop("for"));
                        });

                    });
                });