Question

我正在撰写一个关于游戏的网页。在这里有一个页面，其中应该显示游戏的类别，当点击一个游戏时，该类别中的游戏应该出现在它下面。

这是html文件的摘录，我相信当我使用和标签时会出现问题。由于它们在每次迭代中保持不变，当我点击一个类别时，所有类别都会显示他们的重复游戏，而不仅仅是选择的游戏。

               {% if games %}
                   <h1> Games</h1>
               {% for catergory in games %}
                   <highlight><strong><toggleButton>{{ catergory.0.get_catergory_display }} </toggleButton></strong><highlight>
                   <ul>

                       {% for game in catergory %}

                                <catGames><li><highlight> <a href="/panda/game/{{ game.slug }}">{{game.name}}</a> : <i>
                                   {% if game.rating != -1 %}
                                       {{game.rating}}
                                   {% else %}
                                       unrated
                                   {% endif %}
                               </i></highlight></li></catGames>

                       {% endfor  %}

                   </ul>
                   <br/>
               {% endfor %}
           {% else %}
               <strong> There are no games present.</strong>
           {% endif %}

这是jquery文件

$(document).ready( function() {
$('toggleButton').click(function() {
    if ($('catGames').is(':hidden')) {
        $('catGames').show();
    } else {
        $('catGames').hide();
    }
});

}）;

我想知道是否有一个更简单的解决方案，而不是手动输入每个类别，并摆脱for循环。它还会导致jquery出现问题，突出显示正在盘旋的文本，点亮所有类别和游戏，而不仅仅是正在悬停的文本。

Answer 1

问题不在于循环。它是关于如何在循环中创建元素的，以及如何使用onlick引用它们。

所以这是一种解决方法：

$(document).ready( function() {
    $('toggleButton').click(function() {
        if ($(this).parent('highlight').next('ul').find('catGames').is(':hidden')) {
// this way you try to point to the corresponding ul tag next
// to the toggle botton and try to hide and show the whole ul

            $(this).parent('highlight').next('ul').find('catGames').show();
        } else {
            $(this).parent('highlight').next('ul').find('catGames').hide();
        }
    });
});

所以关于你所说的部分有一个更好的解决方案类别和开放和关闭类别是的。你检查了https://v4-alpha.getbootstrap.com/components/collapse/。我相信您可以使用该功能并根据您的需求进行定制。如果您在使用它时遇到问题请告诉我。

Answer 2

您必须具体说明正确的<catGames>

尝试这种不同的方式：

第一个：

$('toggleButton').click(function(e) {
  const cat = $(e.currentTarget).closest('h1').next('ul').find('catGames');
  cat.is(':hidden') ? cat.show() : cat.hide();
});

第二个（对我而言最好的方式）：

例如用<div class='catergory'>包裹每个catergory并试试这个：

$('div.catergory').on('click', 'toggleButton', function(e){
  const cat = $(e.delegateTarget).find('catGames');
  cat.is(':hidden') ? cat.show() : cat.hide();
});

$(e.delegateTarget)关注包含<catGames>

的主容器

html中的for循环导致jquery问题

2 个答案: