CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Heisenberg
Heisenberg

Reputation: 5299

How to check whether the function has called or not

For example my code is like below.

I would like to classchange by clicking and hovering.

But it didn't work.

I would like to know,

① How to check the wrong point?

② How to fix such wrong point?

I tried console.log,but I would like to know whether the function is correctly mapped and correctly work.

Thanks

var $ = jQuery;
const $days = $(this).find('.day');

function register() {

  function clicked() {
        $(this).toggleClass(is-clicked);
   }
  
  function hoverRange(){
      $(this).addClass(is-hover);
  }
  
  $days.on({
    click: clicked,
    hover: hoverRange,
  });
  
 }
  
 $("#calendar").each(register);
td{
padding:10px;
border:solid  black 1px;}

table{
border-collapse:collapse;}

is-clicked{
background-color:aqua;
}

is-hover{
background-color:yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>
  <table>
    <tr>
      <td class=day>1</td>
      <td class=day>2</td>
      <td class=day>3</td>
    </tr>
  </table>
</div>

Upvotes: 1

Views: 42

Answers (1)

Manjuboyz
Manjuboyz

Reputation: 7066

you're using wrong code in the click event

  1. you should have . in your css class.
  2. you should use this when event is triggered, you were trying to trigger by using $days which is not correct.
  3. for hover you don't need to write a method for that, I have updated the code.

var $ = jQuery;
const $days = $(this).find('.day');

function register() {
  function clicked() {
    alert("clicked");
    $(this).toggleClass('is-clicked');
  }

  $(this).on({
    click: clicked
  });
}
$("#calendar").each(register);
td {
  padding: 10px;
  border: solid black 1px;
}

table {
  border-collapse: collapse;
}

.is-clicked {
  background-color: aqua;
}

td:hover {
  background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>
  <table>
    <tr>
      <td class=day>1</td>
      <td class=day>2</td>
      <td class=day>3</td>
    </tr>
  </table>
</div>

Upvotes: 2

Related Questions