速度Jquery切换功能未考虑在内

Question

I'm working on a web app. 我正在使用网络应用程序。 I use : 我用：

Last version of Django Django的最新版本
In a virtual environment for python 在python的虚拟环境中
I use the CDN of getbootstrap ( https://getbootstrap.com/ ) 我使用getbootstrap（ https://getbootstrap.com/ ）的CDN

I'm trying to toggle a DIV block when I click on another DIV . 单击另一个DIV时，我试图切换 DIV块 。 This my Jquery script : 这是我的Jquery脚本：

{% for s in salle %}
$( ".{{ s.name }}" ).click(function(event) {
  var className = $(this).attr('class');
  className = "." + className + '-content';
  $(className).toggle('slow');
});
{% endfor %}

I would like a slow effect. 我想要一个缓慢的效果。 That's why I put a 'slow' speed inside of the toggle() Jquery function, but it is not considered. 这就是为什么我在toggle（）Jquery函数中放入“慢”速度的原因，但是并未考虑到它。

Here, it is my code : 这是我的代码：

{% 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>

Would you have an idea of what I'm doing wrong ? 你能知道我在做什么错吗？

Thanks a lot ! 非常感谢！

Answer 1

If the toggle() function is working but the "slow" parameter is not producing any effect, then perhaps, most probably, you are using the "slim" version of JQuery. 如果toggle（）函数正在运行，但是“ slow”参数没有产生任何效果，则很可能您正在使用JQuery的“ slim”版本。

Try using this: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js 尝试使用此： https : //cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Hope this helps :) 希望这可以帮助：）

速度Jquery切换功能未考虑在内

问题描述

1 个解决方案

解决方案1
0 2019-01-19 16:34:16

速度Jquery切换功能未考虑在内

问题描述

1 个解决方案

解决方案1 0 2019-01-19 16:34:16

解决方案1
0 2019-01-19 16:34:16