1

我正在开发一个 Django 项目，我想在该项目中输出一个文本文件并应用某些操作，例如突出显示文本。我的想法是以这样一种方式来实现它，即每个单词都可以被单击，以显示一个弹出窗口（或工具提示窗口），显示所有选项。

{% for Line in File.body %}
<div>
    {% for Token in Line %}
      {% if not Token.content == None %}
        <span class="inline token" id="token">
          <strong style="color: {{ Token.highlight }};">
            {{ Token.content }}
          </strong>
        </span>
        <div id="{{ Token.unique_id }}">
          POPUP </br>
          <button onclick="changeColor()">Highlight</button>
        </div>

        <script>
          tippy('.token', {
            content: document.getElementById("{{ Token.unique_id }}"),
            delay: 100,
            arrow: true,
            arrowType: 'round',
            size: 'large',
            duration: 500,
            animation: 'scale',
            allowHTML: true,
            hideOnClick: true,
            trigger: "click"
          })

          function changeColor() {
          var token = document.getElementById("token");
          token.style.color="blue;";

          }
      </script>

      {% endif %}
      {% if Token.endline %}
          </br>
      {% endif %}
    {% endfor %}
</div>

{% endfor %}

我尝试使用tippjs 工具提示库（https://atomiks.github.io/tippyjs/），但是单击突出显示按钮没有任何作用。如果我不将 javascript 部分放入循环中，则根本不会发生任何事情。javascript 部分不在循环中的代码如下所示：

<script>
    tippy('.token', {
        content: document.getElementById("{{ Token.unique_id }}"),
        delay: 100,
        arrow: true,
        arrowType: 'round',
        size: 'large',
        duration: 500,
        animation: 'scale',
        allowHTML: true,
        hideOnClick: true,
        trigger: "click"
      })

      function changeColor() {
      var token = document.getElementById("token");
      token.style.color="blue;";
      }
  </script>

{% for Line in File.body %}
<div>
    {% for Token in Line %}
      {% if not Token.content == None %}
        <span class="inline token" id="token">
          <strong style="color: {{ Token.highlight }};">
            {{ Token.content }}
          </strong>
        </span>
        <div id="{{ Token.unique_id }}">
          POPUP </br>
          <button onclick="changeColor()">Highlight</button>
        </div>

      {% endif %}
      {% if Token.endline %}
          </br>
      {% endif %}
    {% endfor %}
</div>

{% endfor %}

我是 django 的新手，甚至是 javascript 的新手，所以我不确定这是否是正确的方法。

有人可以在这里指出我正确的方向吗？

4

0 回答 0