jQuery addClass example

Change class name on click in jQuery

by Şuayip Ekmekci

HTML

<div class="teemachine tees fixed" data-tooltip="Bu tasarımı sabitle">
					<div class="tee index_0 col-xs-4 col-sm-4 col-md-4" style="display: block;"><div class="basicProductDisplay" productid="338" skuid="2282"><div class="basicProductPicture"><img src="https://www.kaft.com/static/images/cache/313/tisort_faith_2654_313_313.jpg?cacheID=1528110366000" alt="FAITH - Tişört" title="FAITH - Tişört"></div><div class="basicProductInfoBar"><span class="productName">FAITH</span><div class="prices"><span class="salePrice"><span class="formattedPrice">49</span> <span class="priceCurrency formattedPrice" content="TRY">TL</span></span></div></div><div class="productDetailShow"><div class="product-name"></div><div class="basicProductQuickShop"><a rel="quickProductGallery" data-path="/store/quick/faith-tisort/338/gender," class="fancyboxProductQuick tr fancybox.iframe"></a></div></div></div><div class="tee_checkbox_container passive" style="display: block;"><input type="checkbox" skuid="2282" name="checkbox_0" id="checkbox_0" class="teemachineCheckbox"><label for="checkbox_0" class="teemachineCheckboxLabel">Sabitle</label></div></div>					
									<div class="tee index_1 col-xs-4 col-sm-4 col-md-4" style="display: block;"><div class="basicProductDisplay" productid="251" skuid="1561"><div class="basicProductPicture"><img src="https://www.kaft.com/static/images/cache/313/tisort_neyz_1966_313_313.jpg?cacheID=1528110366000" alt="NEYZ - Tişört" title="NEYZ - Tişört"></div><div class="basicProductInfoBar"><span class="productName">NEYZ</span><div class="prices"><span class="salePrice"><span class="formattedPrice">49</span> <span class="priceCurrency formattedPrice" content="TRY">TL</span></span></div></div><div class="productDetailShow"><div class="product-name"></div><div class="basicProductQuickShop"><a rel="quickProductGallery" data-path="/store/quick/neyz-tisort/251/gender," class="fancyboxProductQuick tr fancybox.iframe"></a></div></div></div><div...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var myList = ["2052","1561","2282","2767"],
full = false;

function search() {
  var item = $('.tee .basicProductDisplay');

  for (var i = 0; i < item.length; i++) { 
      var skuId = item[i].getAttribute('skuid');
      if(myList.indexOf(item[0].getAttribute('skuid')) >= 0 && myList.indexOf(item[1].getAttribute('skuid')) >= 0 && myList.indexOf(item[2].getAttribute('skuid')) >= 0){
      	full = true;
      }else if(myList.indexOf(skuId) >= 0){
      	if ( $('.tee_checkbox_container input[skuid="' + skuId + '"]').is(':checked') != true){
        	$('.tee_checkbox_container input[skuid="' + skuId + '"]').prop('checked', true);
        }
      }else {
        full = false;
      }
  }
  
  return full;
}

var myVar = setInterval(function() {
  var fullControl = search();
  if (fullControl == true) {
  	clearInterval(myVar);
    console.log('Full');
  }else{
    console.log(':(');
    $('.actionButtons .buton:first-child').click();
  }
}, 1500);