gpt4 book ai didi

javascript - 如何使用 toggleClass

转载 作者:行者123 更新时间:2023-11-27 23:58:27 25 4
gpt4 key购买 nike

我想用 mouseover 和 mouseleave 绑定(bind)元素以突出显示我创建的功能。我的脚本不起作用,我不知道我做错了什么。

$(function() {
$("#evtTarget").bind("mouseover", highlight);
$("#evtTarget").bind("mouseleave", highlight);
});

function highlight(evt) {
$("#evtTarget").toggleClass(highlighted);
}
.normal {
width: 300px;
height: 200px;
background-color: Yellow;
font-size: 18pt;
}

.highlighted {
background-color: Red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Binding and Unbinding Events with jQuery</title>
</head>

<body>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>
</body>

</html>

最佳答案

你差一点,你忘了 ""$("#evtTarget").toggleClass(highlighted);

应该是$("#evtTarget").toggleClass("highlighted");

演示

function highlight() {
$("#evtTarget").toggleClass("highlighted");
}

$(function() {
$("#evtTarget").bind("mouseover", highlight);
$("#evtTarget").bind("mouseleave", highlight);
});
.normal {
width: 300px;
height: 200px;
background-color: Yellow;
font-size: 18pt;
}

.highlighted {
background-color: Red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">Mouse over this div to see the effect. Click on it to unbind the mouseover.</div>

关于javascript - 如何使用 toggleClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56129148/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com