javascript - html中如何定义函数以及如何使用各个方法

Question

我很困惑如何定义函数以及如何使用它们。

我将 each 方法应用于 html 表格，但似乎该功能效果不佳。

我定义了 2 个类，我可以通过单击按钮来选择它们。

实际情况下这个处理有点复杂，所以我想将点击效果定义为函数。

① 为什么这段代码不起作用？

②还有其他复杂的方法可以实现这一点吗？

如果有人有意见，请告诉我。

谢谢。

$('.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。如果你想重用，请定义全局变量。单击传递$(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>