javascript - 未考虑速度 Jquery 切换功能
问题描述
我正在开发一个网络应用程序。我用 :
- Django的最后一个版本
- 在python的虚拟环境中
- 我使用 getbootstrap 的 CDN ( https://getbootstrap.com/ )
当我单击另一个 DIV时,我试图切换一个DIV 块。这是我的 Jquery 脚本:
{% for s in salle %}
$( ".{{ s.name }}" ).click(function(event) {
var className = $(this).attr('class');
className = "." + className + '-content';
$(className).toggle('slow');
});
{% endfor %}
我想要一个缓慢的效果。这就是为什么我在 toggle() Jquery 函数中放了一个“慢”速度,但没有考虑到这一点。
在这里,这是我的代码:
{% load static %}
<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/salle_escape.css' %}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Chat Room</title>
</head>
<body>
<div class="container-fluid bandeau">
<div class='menu_escape'>
<h1><span class='escape-name'>{{ escape }}</span></h1>
</div>
</div>
<div class="container-fluid d-flex h-100 flex-column">
<div class='row flex-fill'>
<div class='colonne_salle col-sm-2'>
{% for s in salle %}
<div class="bloc-salle border-bottom" id="{{ s.name }}">
<h2><span class='nom-salle'>{{ s.name }}</span></h2>
</div>
{% endfor %}
</div>
<div class="colonne_enigme col-sm">
{% for s in salle %}
<div class="salle_detail" id="{{ s.name }}-content">
{% for enigme in s.enigme_set.all %}
<div class="nom_enigme border-bottom">
<h2>{{ enigme.enigme_name }}</h2>
{% for rfid in enigme.rfid_set.all %}
<div clas=detail_capteur">
<div>
<h3>{{ rfid.sensor_name }}</h3>
</div>
<div class="donnees_capteur">
<span class="hex_solution d-inline p-2 bg-primary text-white">Code Hexa à trouver :</span>
<span class="hexa_detecte d-inline p-2 bg-primary text-white">{{rfid.hexa_to_find}}</span>
<span class="hex_enjeu d-inline p-2 bg-primary text-white">Code Hexa détecté :</span>
<span class="d-inline p-2 bg-primary text-white" id="{{ rfid.sensor_name }}"></span>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
<script>
<!-- Javacript pour gérer les channels -->
var escapeName = {{ escape_name_json }};
var chatSocket = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/autre/' + escapeName + '/');
chatSocket.onmessage = function(e) {
var data = JSON.parse(e.data);
var name_sensor = data['name_sensor'];
var data = data['data'];
console.log(name_sensor)
document.querySelector('#' + name_sensor ).innerHTML = data;
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
<!-- Javacript pour gérer l'affichage suivant la salle sélectionnée -->
{% for s in salle %}
$( "#{{ s.name }}" ).click(function(event) {
var className = "#{{ s.name }}" + '-content';
$(className).toggle('slow');
// alert(className);
//$(this).addClass("d-none");
// alert( "Handler for .click() called." );
});
{% endfor %}
</script>
</html>
你知道我做错了什么吗?
非常感谢 !
解决方案
如果 toggle() 函数正在工作,但“slow”参数没有产生任何效果,那么您很可能正在使用 JQuery 的“slim”版本。
尝试使用这个:https ://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
希望这可以帮助 :)
推荐阅读
- azure - 跳过天蓝色函数事件中心输出
- sql - 将日期字段从平面文件导入到 sql
- python - Plotly control relative lengths of each axis
- node.js - 处理nodejs中子域的升级请求
- mongodb - Golang 上的 MongoDB,获取最近 15 分钟内插入的记录
- flask - 将 Flask 应用程序部署到 Windows IIS 时 config.py 和 web.config 文件的区别
- python - Pydantic 获取字段类型提示
- load-testing - 在 Gatling 中传递多个标题
- flutter - 如何从 rive 应用程序创建 Flare 文件?颤振耀斑动画
- python - 为什么我不能正常使用我的包裹?派皮