我尝试在 jQuery 中绑定(bind)多个事件。
例如,在下面的代码片段中,我定义了 2 个函数
,它们在 eventhander
中使用。
我尝试了这段代码,但效果不佳。
我想知道哪里必须修复。
如果有人有意见请告诉我。
谢谢
function outpatient(elm) {
elm.removeClass().addClass(style1);
}
function hover(elm) {
elm.addClass(style2);
}
$("#calendar .day").on("click hover", function(event) {
if (event.type == "click") {
outpatient($(this))
} else {
hover($(this))
}
});
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
.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>
最佳答案
监听 mouseenter
事件,没有 hover
事件:
function outpatient(elm) {
elm.removeClass().addClass('style1');
}
function hover(elm) {
elm.addClass('style2');
}
$("#calendar .day").on("click mouseenter", function(event) {
if (event.type == "click") {
outpatient($(this))
} else {
hover($(this))
}
});
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
.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>
关于javascript - jQuery 中如何绑定(bind)多个事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60928945/