我应该如何编辑我的javascript，以便我能够点击html列表？

我有一个列表，我希望用户通过使用“下一个”和“上一个”来单击。由于某些原因，我当前的代码不能正常工作。它什么也没做。当用户选择next时，我希望它显示下一个项目，反之亦然

HTML:

{% extends "layout.html" %}
    {% block content %}
    <div class="jumbo">
      <div class ="results" align="center">
       <h1>Test </h1>
        <ul class = "food_choice" style="list-style: none;">
           <li><span>{{search_results}}<br/> Rating: {{search_results1}}<br/><a     href="{{search_results2}}"> Check out {{search_results}} on Yelp</a><br/>{{search_results3}}<br/>{{search_results4}}<br/>{{search_results5}}</span></li>
           <li><span>{{search_results6}}<br/> Rating: {{search_results7}}<br/><a href="{{search_results8}}"> Check out {{search_results6}} on Yelp</a><br/>{{search_results9}}<br/>{{search_results10}}<br/>{{search_results11}}</span>         </li>     
        </ul>
         <button class="next" type="button">Next</button>
         <button class="back" type="button">Back</button>
       </div>
    </div> 

{% endblock %}

{%extends“layout.html”%}
{%block content%}
试验

{search_results}
评级：{{search_results1}

{search_results3}
{search_results4}}
{search_results5}
{search_results6}}
评级：{{search_results7}

{search_results9}
{search_results10}
{search_results11}

下一个
返回
{%endblock%}

Javascript:

<script>
    $('.results').each(function() {

        $(this).find('li').first().siblings().hide();

        $(this).find('.next').click(function () {
            $(this)
                .parent('.results')
                .find('li:first-child')
                .fadeOut(function () {
                $(this)
                    .next()
                    .fadeIn()
                $(this)
                    .appendTo($(this).parent())
            });

        });

        $(this).find('.back').click(function () {
           $(this)
            .parent('.results')
            .find('li:food_choice')
            .fadeOut(function () {
                $(this)
                .parent()
                .find('li:last-child')
                .fadeIn()
                .prependTo($(this).parent())
            });
        });

    });
</script>

$（'.results'）。每个（函数（）{
$（this.find（'li'）.first（）.sides（）.hide（）；
$（this）。查找（'.next'）。单击（函数（）{
$（本）
.parent（“.results”）
.find（'li:第一个孩子'）
.衰减（功能（）{
$（本）
.next（）
.fadeIn（）
$（本）
.appendTo（$（this.parent（））
});
});
$（this）。查找（'.back'）。单击（函数（）{
$（本）
.parent（“.results”）
.find（'li:food\u choice'）
.衰减（功能（）{
$（本）
.parent（）
.find（'li:最后一个孩子'）
.fadeIn（）
.prependTo（$（this.parent（））
});
});
});

类似的方法应该可以奏效：

$(".results").each(function(){
    var results = $(this);
    results.find(".next").click(function(){
        results.find("li").each(function(){
            if($(this).hasClass("active") && $(this).next().length > 0)
            {
                $(this).removeClass("active");
                $(this).next().addClass("active");
            }
        });
    });
    results.find(".back").click(function(){
        results.find("li").each(function(){
            if($(this).hasClass("active") && $(this).prev().length > 0)
            {
                $(this).removeClass("active");
                $(this).prev().addClass("active");
            }
        });
    });
});

---

请创建JSFIDLE，因为它很难理解其中发生了什么。另外，如果您可以共享呈现的HTML，而不是预处理的HTML，那么会容易得多。因此建议实际共享一个最小的、具体的和可行的示例，在该示例中，您可以共享实际的HTML输出、CSS和JS。