Creating a Class to Target with jQuery Selectors

Creating a Class to Target with jQuery Selectors
0.0 0

#1

Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.
Can you tell me what does this mean?
I would love if I can get an example…


#2

Here is a basic example. Here is a possible layout for a calculator:

  <div id="calculator-keys" class="container">
    <div class="row">
      <div class="col num">9</div>
      <div class="col num">8</div>
      <div class="col num">7</div>
    </div>
    
    <div class="row">
      <div class="col num">6</div>
      <div class="col num">5</div>
      <div class="col num">4</div>
    </div>
    <div class="row">
      <div class="col num">3</div>
      <div class="col num">2</div>
      <div class="col num">1</div>
    </div>
     <div class="row">
      <div class="col operator">-</div>
      <div class="col num">0</div>
      <div class="col operator">+</div>
    </div>
     <div class="row">
      <div class="col operator">*</div>
      <div class="col equals">=</div>
      <div class="col operator">/</div>
    </div>   
  </div>

Let’s assume I am using Bootstrap 4 library, so my use of .row and .col and .container CSS class names are already defined and let’s say I have the following extra CSS just to make it more like the keys on a calculator.

.col {
  min-height: 50px;
  min-width: 50px;
  border: 1px solid black;
  text-align: center;
}
body {
  padding: 5%;
}

I have added one of three extra class names which I will not necessarily use for layout purposes. You see that I have given the numbers 0-9 a “num” class, the operators +, -, *, and / an “operator” class and the = sign an “equals” class. Later on in my JavaScript using jQuery I could apply an event handler on just the number divs, like:

$(".num").click(function() {
  var numClicked = $(this).text();
  // do something with numClicked
});