ТипError: $ (...). Parent (...). Next (...). FadeToggle не является функцией

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 is not a function

Я не имею никакого понятия, так как я скопированный код непосредственно из видео

Answer 1

Попробуйте это: Используйте только один JQuery библиотеки becausing с использованием двух может привести к конфликтам. Ниже кода, где я включил Jquery 2.1.1 версии

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

<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>

Answer 2

Тонкая версия исключает AJAX, эффекты, и в настоящее время устаревшего код. https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

Slim build

Finally, we’ve added something new to this release. Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k. These files are also available in the npm package and on the CDN:

Я думаю, Toggle также подпадает под действие эффектов Jquery. Таким образом, вы удалите slim-ссылку на файл, а также обратитесь к JQuery или Jquery.min