Как определить функцию и как использовать каждый метод в html

Question

Я запутался, как определять функции и как их использовать.

Я применяю метод each к html таблицам, но кажется, что функция не сработала.

Я определяю 2 класса и могу выбирать их, нажимая кнопки.

В реальном случае эта обработка несколько сложна, так что I would like to define click effect as function.

① Почему этот код не работает?

② Есть ли какой-нибудь другой изощренный метод для реализации этого?

Если у кого-то есть мнение, пожалуйста, дайте мне знать.

Спасибо.

$('.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>

Answer 1

Тебе нужно немного почистить js. определить global переменную, если вы хотите использовать повторно. нажмите передать $(this). Это не будет работать, когда вы вызываете метод, например 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>