我混淆了如何定义函数以及如何使用它们。
我将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>你需要稍微清理一下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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句