html - jQuery removeClass 函数不起作用
问题描述
我正在尝试删除事件中的元素类。我正在使用jQuery库，并使用该函数removeClass删除元素的类。
但是，在检查元素的类时，我删除的类不会从列表中删除。为了检查元素的类，有以下代码块：
console.log($zoomToolOBJ.attr('class'));
$zoomToolOBJ.removeClass('onTool');
console.log($zoomToolOBJ.attr('class'));
当我查看控制台时，我确实onTool在两者中都看到了类console.log（意味着该类onTool没有被删除）。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Ado designed</title>
<style>
.tools {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 8px;
border-radius: 8px;
box-shadow: 3px 3px 3px #c5c5c5,
-3px 3px 3px #c5c5c5;
}
.toolIcon {
cursor: pointer;
transition: all .3s ease;
height: 60px;
width: 60px;
padding: 15px;
border-radius: 8px;
fill: #4d4d4d;
}
.toolIcon:not(:last-child) {
margin-bottom: 10px;
}
.toolIcon:hover {
background-color: #008cba;
fill: #FFF;
}
.onTool {
background-color: #008cba;
fill: #FFF;
}
</style>
</head>
<body>
<div class="tools">
<svg id="zoomTool" class="toolIcon onTool" viewBox="0 0 512 512">
<path
d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z" />
<path
d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z" />
</svg>
<svg id="vectorTool" class="toolIcon" viewBox="0 0 492.426 492.426">
<polygon
points="261.232,434.981 261.232,57.445 305.607,101.82 326.82,80.606 246.213,0 165.607,80.606 186.82,101.82
231.232,57.408 231.232,435.019 186.82,390.606 165.607,411.82 246.213,492.426 326.82,411.82 305.607,390.606 " />
</svg>
<svg id="proportionsTool" class="toolIcon" viewBox="0 0 512 512">
<path d="M504.843,72.607L439.386,7.15c-9.534-9.534-25.048-9.533-34.582,0L281.561,130.392c-3.086,3.087-3.086,8.089,0,11.176
c3.086,3.085,8.089,3.085,11.175,0L415.978,18.326c1.634-1.634,3.806-2.533,6.116-2.533s4.482,0.899,6.116,2.533l65.458,65.457
c1.633,1.633,2.533,3.805,2.533,6.116c0,2.31-0.9,4.482-2.533,6.115l-16.064,16.064L435.515,69.99
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.088,42.088l-18.353,18.353l-18.498-18.498
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.497l-18.353,18.353l-18.498-18.498
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.497l-18.353,18.353l-42.089-42.09
c-3.085-3.084-8.089-3.086-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.089,42.089l-18.353,18.353l-18.498-18.498
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.497,18.497l-15.526,15.526L255.1,179.203l14.45-14.451
c3.086-3.087,3.086-8.089,0-11.176c-3.086-3.085-8.089-3.085-11.175,0l-14.451,14.451L98.156,22.264
C88.018,12.126,74.539,6.543,60.202,6.543c-14.337,0.001-27.816,5.584-37.953,15.722C12.11,32.403,6.527,45.881,6.527,60.219
c0,14.337,5.583,27.816,15.721,37.954l145.765,145.765L7.157,404.797c-9.534,9.535-9.534,25.048,0,34.583l65.457,65.458
C77.232,509.456,83.373,512,89.905,512c6.532,0,12.673-2.544,17.291-7.162L268.054,343.98l11.457,11.457
c3.086,3.085,8.089,3.085,11.175,0c3.086-3.087,3.086-8.089,0-11.176l-15.814-15.814c-0.307-0.486-0.667-0.948-1.09-1.371
c-0.423-0.423-0.885-0.783-1.37-1.09L101.189,154.763l21.191-21.191l13.102,13.102c1.543,1.542,3.565,2.314,5.588,2.314
s4.045-0.772,5.588-2.314c3.086-3.087,3.086-8.089,0-11.176l-13.101-13.101l21.191-21.191l83.579,83.579
c0.003,0.004,0.006,0.007,0.01,0.011c0.004,0.004,0.007,0.006,0.011,0.01l88.081,88.081c0.218,0.288,0.45,0.57,0.713,0.833
s0.544,0.495,0.832,0.713l117.268,117.268l-21.191,21.191L305.735,294.576c-0.071-0.077-0.135-0.158-0.21-0.232l-47.182-47.183
c-0.078-0.078-0.163-0.146-0.243-0.22l-83.343-83.342c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176
l249.291,249.291l-21.192,21.191l-75.096-75.097c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176
l80.684,80.684c0.767,0.767,1.717,1.386,2.728,1.778l95.478,37.069c1.506,0.584,3.076,0.868,4.634,0.868
c3.342,0,6.624-1.308,9.073-3.759c3.591-3.593,4.721-8.973,2.88-13.707l-37.108-95.434c-0.392-1.008-1.011-1.96-1.777-2.725
L343.963,268.071l160.88-160.881C514.378,97.655,514.378,82.142,504.843,72.607z M256.882,332.805l-15.507,15.503l-18.498-18.498
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.498l-18.353,18.353l-42.089-42.089
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.089,42.089l-18.353,18.353l-18.498-18.498
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.497l-18.353,18.353l-18.498-18.498
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.498l-18.353,18.353l-42.089-42.089
c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.089,42.088l-16.064,16.064
c-1.634,1.634-3.806,2.534-6.116,2.534s-4.482-0.9-6.116-2.534l-65.457-65.458c-3.372-3.372-3.372-8.859,0-12.231l160.857-160.858
L256.882,332.805z M33.423,86.998c-14.766-14.766-14.766-38.792,0-53.558c14.766-14.767,38.792-14.767,53.558,0l24.976,24.976
l-53.558,53.558L33.423,86.998z M116.798,116.803c-0.002,0.002-0.004,0.003-0.005,0.005c-0.002,0.002-0.003,0.004-0.005,0.005
l-26.774,26.774l-20.439-20.439l53.558-53.558l20.439,20.439L116.798,116.803z M483.703,483.681l-77.864-30.229l47.601-47.601
L483.703,483.681z" />
</svg>
<svg id="colorsTool" class="toolIcon" viewBox="0 0 459 459">
<path
d="M229.5,0C102,0,0,102,0,229.5S102,459,229.5,459c20.4,0,38.25-17.85,38.25-38.25c0-10.2-2.55-17.85-10.2-25.5
c-5.1-7.65-10.2-15.3-10.2-25.5c0-20.4,17.851-38.25,38.25-38.25h45.9c71.4,0,127.5-56.1,127.5-127.5C459,91.8,357,0,229.5,0z
M89.25,229.5c-20.4,0-38.25-17.85-38.25-38.25S68.85,153,89.25,153s38.25,17.85,38.25,38.25S109.65,229.5,89.25,229.5z
M165.75,127.5c-20.4,0-38.25-17.85-38.25-38.25S145.35,51,165.75,51S204,68.85,204,89.25S186.15,127.5,165.75,127.5z
M293.25,127.5c-20.4,0-38.25-17.85-38.25-38.25S272.85,51,293.25,51s38.25,17.85,38.25,38.25S313.65,127.5,293.25,127.5z
M369.75,229.5c-20.4,0-38.25-17.85-38.25-38.25S349.35,153,369.75,153S408,170.85,408,191.25S390.15,229.5,369.75,229.5z" />
</svg>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/blowup.min.js"></script>
<script>
$(document).ready(() => {
// Tool icons objects
const $zoomToolOBJ = $('#zoomTool');
const $vectorToolOBJ = $('#vectorTool');
const $proportionsToolOBJ = $('#proportionsTool');
const $colorsToolOBJ = $('#colorsTool');
// Selected tool -- initiated with zoom tool
let mode = 1;
// Holder for the active tool element (if any)
let $activeToolOBJ = $zoomToolOBJ;
// Handlers for tool icon click event
const zoomToolOnClick = () => {
if (mode !== 1) {
if (!!$activeToolOBJ) {
$activeToolOBJ.removeClass('onTool');
}
$activeToolOBJ = $zoomToolOBJ;
mode = 1;
$zoomToolOBJ.addClass('onTool');
return;
}
mode = 0;
$zoomToolOBJ.removeClass('onTool');
$activeToolOBJ = null;
}
$zoomToolOBJ.on('click', zoomToolOnClick);
});
</script>
</body>
</html>
解决方案
问题似乎与您使用的 jQuery 版本有关。您使用的是 2.x 版本，这是 SVG 的 jQuery 问题。它适用于 3.x 版本。如果可能，请考虑升级您的 jQuery 版本。另请参阅此答案以获取更多信息。
推荐阅读
- elasticsearch - 无法通过filebeat将日志发送到Kubernetes中的logstash
- permissions - 从数据洞察访问数据时，数据集级别的 BigQuery 数据查看者权限与项目级别的权限有何区别？
- java - SpringBoot骆驼单元测试导致camelContext错误
- go - 转换为 DataResponse 的参数过多
- sql - 如何在 SQL 中对一组自定义计算字段求和？
- intellij-idea - 如何打开在 Intellij 中导出的图表？
- mongodb - 是否有任何标准工具可以在启动期间使用 Spring Boot 更新 MongoDB 集合？
- javascript - ReactJs：由于不推荐使用componentWillMount，如何在组件安装之前执行代码？
- excel - 如何让我的代码在任何工作表上运行
- apache-kafka - Apache Camel Kafka：如何在生产者配置中设置属性“delivery.request.ms”