Question

我正在使用Django网站。这是我已包含在正文中的脚本

$(document).ready(function(){
    $(".comment-reply-btn").click(function(event){
        event.preventDefault();
        $(this).parent().next(".comment-reply").fadeToggle();
    })
})

这是我的HTML

<blockquote>
         <p>{{ comment.content }}</p>
         <footer>by {{ comment.user }} , {{ comment.timestamp | timesince }} ago |
             {% if comment.children.count > 0 %}{{ comment.children.count }} Comment {% endif %}
             {% if comment.children.count > 1 %}s {% endif %} |<a class="comment-reply-btn" href="#"> Reply </a></footer>
         <div class="comment-reply">
          {% for child_comment in comment.children %}
             <blockquote>
                  <p>&mdash; {{ child_comment.content }}</p>
                  <footer>by {{ child_comment.user }} , {{ child_comment.timestamp | timesince }}ago</footer>
                 <br>
             </blockquote>
            {% endfor %}
             <form method="post" action=".">{% csrf_token %}
                 {{ comment_form | crispy }}
                 <input type="hidden" name="parent_id" value="{{ comment.id }}" >
                 <input type="submit" value="Reply" class="btn btn-inverse" >
             </form>
         </div>
</blockquote>

这些是我的脚本（我只包括两个脚本）：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script   src="http://code.jquery.com/jquery-3.1.0.slim.min.js"   integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="   crossorigin="anonymous"></script>

我收到此错误：

TypeError：$（...）。parent（...）。next（...）。fadeToggle不是函数

我完全不知道，因为我直接从视频中复制了代码

Answer 1

试试这个：只使用一个jquery库，因为使用两个可能会产生冲突。请参阅下面的代码，其中包含了jquery 2.1.1版本

＆＃13;

$(document).ready(function(){
    $(".comment-reply-btn").click(function(event){
        event.preventDefault();
        $(this).parent().next(".comment-reply").fadeToggle();
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<blockquote>
         <p>comment.content</p>
         <footer>by comment.user , comment.timestamp | timesince <a class="comment-reply-btn" href="#"> Reply </a></footer>
         <div class="comment-reply">

             <blockquote>
                  <p>&mdash;  child_comment.content </p>
                  <footer>by  child_comment.user  , child_comment.timestamp | timesince ago</footer>
                 <br>
             </blockquote>

             <form method="post" action=".">
                 <input type="hidden" name="parent_id" value=" comment.id " >
                 <input type="submit" value="Reply" class="btn btn-inverse" >
             </form>
         </div>

</blockquote>

＆＃13;

Answer 2

Slim版本不包括ajax，效果和当前已弃用的代码。 https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

超薄构建

最后，我们在此版本中添加了一些新内容。有时您不需要ajax，或者您更喜欢使用专注于ajax请求的众多独立库之一。通常，对所有Web动画使用CSS和类操作的组合更为简单。除了包含ajax和效果模块的常规jQuery版本之外，我们还发布了一个排除这些模块的“瘦身”版本。总而言之，它排除了ajax，效果和当前已弃用的代码。 jQuery的大小现在很少是一个负载性能问题，但是苗条的构建比常规版本小约6k gzipped字节 - 23.6k vs 30k。这些文件也可以在npm包和CDN中找到：

我猜，Toggle也受到了Jquery的影响。因此，您将删除slim文件引用，并引用Jquery或Jquery.min

TypeError：$（...）。parent（...）。next（...）。fadeToggle不是函数

2 个答案: