jQuery addClass example

Change class name on click in jQuery

by ericb14

HTML

<head>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>




<div id="pop_up" title="This is The Header" style="display:none;"></div>
<div class="row  product_row justify-content-center">
  <div class="col-md-3 col-sm-12 items product_1" data-caption="This is the data caption for product 1">
    <img class="img-fluid" src="http://placekitten.com/200/200" />
  </div>
  <div class="col-md-3 col-sm-12 items product_2" data-caption="This is the caption for product 2">
    <img class="img-fluid" src="http://placekitten.com/200/200" />
  </div>
  <div class="col-md-3 col-sm-12 items product_3" data-caption="This is the caption for product 3">
    <img class="img-fluid" src="http://placekitten.com/200/200" />
  </div>
</div>
<div class="row">
  <div class="col-md-3 col-sm-12 items product_1" data-caption="This is the data caption for product 4">
    <img class="img-fluid" src="http://placekitten.com/200/200" />
  </div>
  <div class="col-md-3 col-sm-12 items product_2" data-caption="This is the caption for product 5">
    <img class="img-fluid" src="http://placekitten.com/200/200" />
  </div>
  <div class="col-md-3 col-sm-12 items product_3" data-caption="This is the caption for product 6">
    <img class="img-fluid" src="http://placekitten.com/200/200" />
  </div>
</div>

CSS

.row {}

JavaScript

$('.items').on('click', function() {
  var elt = $(this);
  var text = elt.closest('.items').data('caption');
  $('#pop_up').dialog().html(text);
});