CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Heisenberg
Heisenberg

Reputation: 5279

How to define function and how to use each method in html

I confused how to define functions and how to use them.

I apply each method to html tables,but it seems that function didn't work well.

I define 2 classes and I can select them by clicking buttons.

In real case this processing is somewhat complicated ,so that I would like to define click effect as function.

① Why this code didn't work?

② Are there any other sophisticated method for realize this?

If someone has an opinion please let me know.

Thanks.

$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
});

 function hospitalization(){
    $(this).nextAll(':lt(3)').addClass(style);
  }

function outpatient() {
      $(this).removeClass().addClass(style);
 }


function register() {
  

  function clicked() {

    
    if (style=="style1"){
    hospitalization()
    }
    
    else{
    outpatient()
    }  
  }

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

table {
  border-collapse: collapse;
}

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

td:hover {
  background-color: yellow;
}

.style1{
background-color:red;}

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

<div id=calendar>
  <table>
    <tr>
      <td id=1 class=day>1</td>
      <td id=2 class=day>2</td>
      <td id=3 class=day>3</td>
      <td id=4 class=day>4</td>
      <td id=5 class=day>5</td>
      <td id=6 class=day>6</td>
      <td id=7 class=day>7</td>

    </tr>
  </table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

Upvotes: 0

Views: 55

Answers (1)

xdeepakv
xdeepakv

Reputation: 8125

You need to clean up js little bit. define global variable if u want to reuse. click pass the $(this). This will not work when u directly call method like hospitalization ()

let style = "style1"
$('.click_btn').on('click', function (e) {
    e.preventDefault();
    style = $(this).data().style;
    console.log(style)
});

function hospitalization(elm) {
    elm.nextAll(':lt(3)').addClass(style);
}

function outpatient(elm) {
    elm.removeClass().addClass(style);
}

$("#calendar .day").on("click", function clicked(event) {
    if (style == "style1") {
        hospitalization($(this))
    } else {
        outpatient($(this))
    }
});
td {
  padding: 10px;
  border: solid black 1px;
}

table {
  border-collapse: collapse;
}

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

td:hover {
  background-color: yellow;
}

.style1{
background-color:red;}

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

<div id=calendar>
  <table>
    <tr>
      <td id=1 class=day>1</td>
      <td id=2 class=day>2</td>
      <td id=3 class=day>3</td>
      <td id=4 class=day>4</td>
      <td id=5 class=day>5</td>
      <td id=6 class=day>6</td>
      <td id=7 class=day>7</td>

    </tr>
  </table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

Upvotes: 1

Related Questions