jQuery addClass example

Change class name on click in jQuery

by sayanbay

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <div data-bind="visible: state">
<table class="table table-striped" data-bind="with: products">
            <thead>
            <tr>
                <th scope="col">Елді мекен</th>
                <th scope="col">Дәрі</th>
                <th scope="col">Бағасы</th>
                <th scope="col">Телефон</th>
            </tr>
            </thead>
            <tbody data-bind="foreach:$data">
            <tr >
                <td data-bind="text: city"></td>
                <td data-bind="text: productShortName+', сатылымда '+ available+' дана бар'"></td>
                <td><b data-bind="text: price"></b></td>
                <td>
                    <a data-bind="attr:{href: 'tel:'+phone}">
                        <img src="img/phone.png" width="36" height="36" alt="">
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
 </div>       
 
 <div data-bind="visible: state==false">
   <table class="table table-striped" data-bind="with: branches">
     <thead>
       <tr >
         <th scope="col">Елді мекен</th>
       </tr >
     </thead>
     <tbody data-bind="foreach:branches">
       <tr data-bind="click: $root.goToProducts">
         <td data-bind="text: $data"></td>
       </tr>
     </tbody>
   </table>
</div>
 
        
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script...

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 viewModel = function(data) {
  self.branches = ko.observable();
  self.products = ko.observableArray(data);
  self.state = ko.observable(true);
  self.goToProducts = function(branche) {
    // При выборе филиала, должно отразится только товары выбранного филиала
    self.state(false);
    console.log(branche);
    console.log(self.branches());
  }

  var groupBy = function(xs, key) {
    return xs.reduce(function(rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  };
}

$(document).ready(function() {
  console.log("ready");
  ko.applyBindings(new viewModel(_products));
});

var _products = [{
    "sellerProductId": 1,
    "sellerName": "Серік Туленгалиев",
    "productId": "1",
    "price": 2000,
    "productShortName": "Ивермек  100 мл",
    "productName": "Ивермек 1% 100 мл п/паразитарный (0621)",
    "available": 5,
    "city": "Сайхын",
    "phone": "8777 628 234",
    "state": "ЗКО"
  },
  {
    "sellerProductId": 2,
    "sellerName": "Серік Туленгалиев",
    "productId": "2",
    "price": 1300,
    "productShortName": "Ивермек 50",
    "productName": "Ивермек 1% 50 мл п/паразитарный (0521)",
    "available": 5,
    "city": "Сайхын",
    "phone": "8777 628 234",
    "state": "ЗКО"
  },
  {
    "sellerProductId": 3,
    "sellerName": "Серік Туленгалиев",
    "productId": "3",
    "price": 9600,
    "productShortName": "Ивермек 500",
    "productName": "Ивермек 1% 500 мл п/паразитарный (1121)",
    "available": 1,
    "city": "Сайхын",
    "phone": "8777 628 234",
    "state": "ЗКО"
  },
  {
    "sellerProductId": 4,
    "sellerName": "Серік Туленгалиев",
    "productId": "10",
    "price": 1600,
    "productShortName": "Нитокс-200.  100 мл",
    "productName": "Нитокс-200.  100 мл",
    "available": 3,
    "city": "Сайхын",
    "phone": "8777 628 234",
    "state": "ЗКО"
  },
  {
    "sellerProductId": 5,
    "sellerName": "Серік Туленгалиев",
    "productId": "11",
    "price": 900,
    "productShortName": "Нитокс-200....