Question

我正在使用网络应用程序。我使用：

最新版本的Django
在python虚拟环境中
我使用getbootstrap（https://getbootstrap.com/）的CDN

当我点击另一个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>

您能知道我在做什么错吗？

非常感谢！

Answer 1

如果toggle（）函数正常工作，但“ slow”参数未产生任何效果，则很可能您正在使用JQuery的“ slim”版本。

尝试使用此命令：https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

希望这会有所帮助：）

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

1 个答案: