什么可能导致HTML和脚本在for循环的迭代中表现不同

what could cause html and script to behave different across iterations of a for loop?

本文关键字：迭代 循环 for HTML 脚本 什么      更新时间：2023-09-26

我试图建立一个侧边导航栏，其中列出了类别，并在单击一个类别后，子类别的子列表各自显示在类别下方。如果再次单击该类别，子列表将收缩。

我在category对象之间运行一个循环。在这个外部循环中，我包含了一个内部循环来列出子类别和一个脚本，该脚本隐藏子菜单并仅在单击类别时滑动它。我使用django模板标签来动态地为我的html元素分配类名，并在脚本中引用它们。因此，在所有循环迭代之后，有一个子类别列表和每个类别的专用脚本，它们有唯一的类名，所以没有重叠的机会。所以奇怪的部分是，这对于大多数类别来说都是完美的，但是有些类别及其子菜单仍然是打开的，当点击类别时，页面会重新加载。

我不明白，是什么导致完全相同的代码(在for循环中运行)表现如此不同?

这是我的代码:

{% load staticfiles %}
{% load i18n pybb_tags forumindexlistbycat %}
{% catindexlist as catindexlisted %}
{% block body %}<div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 body-container leftsidenavigator" style="margin-top:15px;">
    <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 leftsidenavigator-inner" style="padding:0px;">
         <h2><center>Categories</center></h2>
             <ul class="catindexlist catlistcat nav-collapse89">
                   {% for category in catindexlisted %}
                         <li class="catindexlistitem category-name{{category.name}}{{category.name}}" style="font-weight:600;padding-right:20px;"><a href="">{{category.name}}</a></li>
                         <ul style="padding:0px;" class="nav-collapse88">
                         {% for forum in category|forumindexlistbycat %}
                               <li class="catlistforum{{category.name}}{{category.name}} forum-name" style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}</a></li>
                         {% endfor %}</ul><script>
                         $(function() {
                              $(".catlistforum{{category.name}}{{category.name}}").hide();
                                    $(".category-name{{category.name}}{{category.name}} a").click(function(e) {
                                     e.preventDefault();
                                     $(".catlistforum{{category.name}}{{category.name}}").slideToggle();
                                          if(!($(this).parent('li').siblings('div').children('ul').children('div').is(":visible"))){
                                              $(this).parent('li').siblings('div').children('ul').children('div').is(":visible").slideToggle();
                                          }});
                                      })
                                </script>
                           {% endfor %}
                           </ul>
                      </div>
                      </div>
                  {% endblock %}
     {% block theme_script %}<script src="{% static "pinax/js/theme.js" %}"></script>{% endblock %}

最可能的原因是使用了{{category.name}}作为类名。

代码片段没有显示category.name接受的值，我的猜测是它可以是用户输入?请参阅"属性值"一节中的命名规则，哪些对类名有效。

可以使用模板标签slugify ({{category.name|slugify}})来解决，但我的建议是尝试重新设计解决方案。

类别名称是否有可能包含空格?

只是一个提示:您没有在代码中使用良好的实践。在我看来，你应该把你的javascript代码放在forloop之外，并删除{{ category_name }}类。catindexlistitem点击应该切换隐藏类(我注意到你使用bootstrap)到它的子ul。

通过添加更通用的事件监听器可以简化代码，通过使用css可以提高性能。如果你想添加效果，你仍然可以使用css3。

尝试在外部for循环之后编写javascript函数，有时这可能会重叠和重定向。并且尝试在"li"内的类别名称之间提供空格

我的建议是通过创建一个函数来处理所有的点击来清理你的JS。您已经在单击上使用了类，那么为什么不使用一个函数来处理所有的单击呢?

<script>
  $(function() {
    // Hide all elements with a class starting with catlistforum
    $('[class^="catlistforum"]').hide();
    // Assign clicks to all links whose parent has a class starting with catlistforum
    // (Though why are you hiding the parents? How will they click the links?)
    $('[class^="catlistforum"] a').on("click", function(e) {
      e.preventDefault();
      // Delegate slideToggle to each click target
      $(e.target).slideToggle();
      // This seems redundant, but hopefully it will behave the way you want it to behave
      if(!($(e.target).parent('li').siblings('div').children('ul').children('div').is(":visible"))) {
        $(e.target).parent('li').siblings('div').children('ul').children('div').is(":visible").slideToggle();
      }
    });
  })
</script>

当然，如果我是你，我会定义两个新类(例如catlistforum-hide和catlistforum-toggle)，我将分别应用于我想要隐藏和切换的所有元素。

相关文章：