jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />

<div id="product_select_wrap">
  <form name="product_select" id="product_select_form" action="contact-info/" method="post">

    <div class="product-selection-wrap">
      <select id="product_type">
        <option value="" hidden selected>Produktkategorie auswählen</option>
        <option value="">Kaffeebereiter</option>
        <option value="18">Trinkbehälter – Vitalitea</option>
        <option value="11">Sonstiges</option>
      </select>
    </div>

    <div class="slick-slider">
      <div class="slick-slide" data-product-id="" data-product-cat="1"><img src="https://bonmedico.de/wp-content/uploads/2020/02/orthopädisches_sitzkissem.png">Intenca</div>
      <div class="slick-slide" data-product-id="" data-product-cat="2"><img src="https://bonmedico.de/wp-content/uploads/2020/02/comfort_cushion.png">Gazetaro I</div>
      <div class="slick-slide" data-product-id="25" data-product-cat=""><img src="https://bonmedico.de/wp-content/uploads/2020/02/rückenkissen.png">Gazeraro II</div>
      <div class="slick-slide" data-product-id="21" data-product-cat=""><img src="https://bonmedico.de/wp-content/uploads/2020/02/wedge_cushion.png">Frida</div>
      <div class="slick-slide" data-product-id="29" data-product-cat=""><img src="https://bonmedico.de/wp-content/uploads/2020/02/nackenkissen_blau.png">Aldrono</div>
    </div>

    <div class="product-selection-wrap">
      <select id="intenca" class="product-size" data-product-cat="1" hidden>
        <option value="" hidden selected>Größe auswählen</option>
        <option value="68">2 Tassen</option>
        <option value="70">4 Tassen</option>
        <option value="55">6 Tassen</option>
      </select>

    ...

CSS

/* Header */
body #site-logo a {
	height: 50px;
}
body #site-logo img {
	height: 50px;
	max-height: 50px;
	display: inline;
}
body #site-logo,
body #site-logo-inner {
	display: block !important;
	height: 50px;
}
#top-bar-wrap {
	height: 10px;
}

/* Marketplace Styling */
#purchase_channel_wrap select, #product_select_wrap select, 
#gift-form-wrap select {
	width: 100%;
	font-size: 20px;
	padding: 5px 10px 5px 10px;
	margin: 5px 0;
	background-color: #F4F4F4 !important;
	border-radius: 5px;
	color: #777;
	position: relative;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTQwIDE0MCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxnPjxwYXRoIGQ9J20xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHonIGZpbGw9JyUyMzc3NycvPjwvZz48L3N2Zz4=") no-repeat;
	background-position: right 5px top 50%;
}

.product-selection-wrap {
	width: 50%;
	margin: auto;
}


input[type=submit] {
  width: 100%;
  background-color: #7f5c7e;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/**********************************************************************/
/* Slick Styling */
.slick-slide {
    text-align: center;
    background: #eee;
    font-size: 16px;
    color: #6BAAD9;
    font-weight: 600;
    padding: 10px;
    margin: 0 10px;
    border-radius: 8px;
}

.slick-slide {

}

.slick-prev {
	left: 5px;
	z-index: 1000;
}

.slick-next {
	right: 5px;
	z-index: 1000;
}

.slick-slide img {
	margin: auto;
	cursor: pointer;
	margin-bottom: 5px;
    border-radius: 8px;
		width: 100%;
}

.slick-slide:hover {
	-moz-box-shadow: inset 0px 0px 0px 3px #6BAAD9;
	box-shadow: inset 0px 0px 0px 3px #6BAAD9;
}

.slick-list...

JavaScript

(function($) {
  var product_type = $('#product_type'),
    intenca = $('#intenca'),
    product_size = $('.product-size'),
    gazetaro_i = $('#gazetaro_i'),
    product_id_field = $('#product_id'),
    submit_btn = $('#submit_btn'),
    slick_slider = $('.slick-slider'),
    slick_slide = $('.slick-slide'),
    slick_filtered = false;

  product_type.on('change', function() {
    if (product_type.val() != '') {
      slick_slider.slideUp('fast', function() {
        submit_btn.fadeIn();
      });

      product_id_field.val($(this).val());
    } else {
      submit_btn.fadeOut('fast', function() {

        slick_slider.fadeIn();
        slick_slider.get(0).slick.setPosition();
      });
    }
  });

  slick_slide.on('mousedown', function(evt) {
    slick_slide.on('mouseup mousemove', function handler(evt) {
      if (evt.type === 'mouseup') {
        var product_id = $(this).data('product-id');
        if (product_id != "") {
          product_id_field.val(product_id);
          $('#product_select_form').submit();
        } else {
          var product_cat = $(this).data('product-cat');
          product_size.hide();
          $('select[data-product-cat="' + product_cat + '"]').fadeIn();
        }
      }
      slick_slide.off('mouseup mousemove', handler);
    });
  });

  product_size.on('change', function() {
    submit_btn.fadeIn();
    product_id_field.val($(this).val());
  });


  $(document).ready(function() {
    submit_btn.hide();
    slick_slider.hide();
    slick_slider.slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [{
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3
          }
        },
        {
          breakpoint: 800,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 500,
          settings: {
           ...