javascript - 如何在jQuery中绑定多个事件
问题描述
我试图在 jQuery 中绑定多个事件。
例如,在下面的代码片段中,我定义2 functions
并在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>
推荐阅读
- excel - 在 Ecxel 中执行配对 T 检验
- python - 折线图+不同频率的分组条形图
- git - 需要创建一个 azure devops 管道,其中我们有 2 个分支(master 和 X 分支),我们想要合并它们
- angular - 角度定位混乱
- symfony - 使用 Sonata Admin 进行用户/组/角色管理
- vbscript - vbscript 不会正确执行“如果”
- selenium - 如何在 Tosca 中再次使用随机表达式?
- ansible - 如何强制 Ansible 中的变量只有 3 个字符或只有数字?
- swiftui - SwiftUI 初始化将存储在 UserDefaults 中的变量
- sql - 如何在没有不符合条件的重复项的情况下进行 JOIN?