我的JavaScript不會加載在python-flask

-1

我試圖加載一段javascript funconality到我的index.html 但是當我加載在燒瓶它似乎並沒有工作。我不是JS專家但是我假設它是JS錯誤，因爲我已經確定在正確的目錄中的所有東西，並正確加載。請看看我做錯了什麼。我的JavaScript不會加載在python-flask

base.html文件

<!doctype html> 
<html> 
<head> 
    <title>Flask-Mobility example</title> 
</head> 
<body> 
    {% block content %} 
    {% endblock %} 
</body> 
</html> 
app\static\index.js

的index.html

{% extends 'base.html' %} 


{% block content %} 
    <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script> 

    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/index.css') }}"> 

    <!-- multistep form --> 
    <form id="msform"> 
     <!-- progressbar --> 
     <ul id="progressbar"> 
     <li class="active">Account Setup</li> 
     <li>Social Profiles</li> 
     <li>Personal Details</li> 
     </ul> 
     <!-- fieldsets --> 
     <fieldset> 
     <h2 class="fs-title">Create your account</h2> 
     <h3 class="fs-subtitle">This is step 1</h3> 
     <input type="text" name="email" placeholder="Email" /> 
     <input type="password" name="pass" placeholder="Password" /> 
     <input type="password" name="cpass" placeholder="Confirm Password" /> 
     <input type="button" name="next" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset> 
     <h2 class="fs-title">Social Profiles</h2> 
     <h3 class="fs-subtitle">Your presence on the social network</h3> 
     <input type="text" name="twitter" placeholder="Twitter" /> 
     <input type="text" name="facebook" placeholder="Facebook" /> 
     <input type="text" name="gplus" placeholder="Google Plus" /> 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="button" name="next" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset> 
     <h2 class="fs-title">Personal Details</h2> 
     <h3 class="fs-subtitle">We will never sell it</h3> 
     <input type="text" name="fname" placeholder="First Name" /> 
     <input type="text" name="lname" placeholder="Last Name" /> 
     <input type="text" name="phone" placeholder="Phone" /> 
     <textarea name="address" placeholder="Address"></textarea> 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="submit" name="submit" class="submit action-button" value="Submit" /> 
     </fieldset> 
    </form> 

{% endblock %}

index.js

//jQuery time 
var current_fs, next_fs, previous_fs; //fieldsets 
var left, opacity, scale; //fieldset properties which we will animate 
var animating; //flag to prevent quick multi-click glitches 

$(".next").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 

    //activate next step on progressbar using the index of next_fs 
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

    //show the next fieldset 
    next_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale current_fs down to 80% 
      scale = 1 - (1 - now) * 0.2; 
      //2. bring next_fs from the right(50%) 
      left = (now * 50)+"%"; 
      //3. increase opacity of next_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({ 
     'transform': 'scale('+scale+')', 
     'position': 'absolute' 
     }); 
      next_fs.css({'left': left, 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".previous").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    previous_fs = $(this).parent().prev(); 

    //de-activate current step on progressbar 
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

    //show the previous fieldset 
    previous_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale previous_fs from 80% to 100% 
      scale = 0.8 + (1 - now) * 0.2; 
      //2. take current_fs to the right(50%) - from 0% 
      left = ((1-now) * 50)+"%"; 
      //3. increase opacity of previous_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'left': left}); 
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".submit").click(function(){ 
    return false; 
})

來源

2017-06-19 Dilli

你可以包含你的'base.html'模板嗎？ –

將它添加到主線程中。 – Dilli

https://codepen.io/anon/pen/pwevzy這是我正在使用的codepen。 – Dilli

移動你的script標籤底部。

如果寫在頂部，他們沒有什麼可供參考的。例如，$(".next")實際上沒有匹配任何內容，因爲該類的元素尚未創建。

來源

2017-06-19 03:58:15

{％嵌段含量％} {％endblock％} – Dilli

我把它放在底部，似乎沒有工作。我也將其添加到base.html下。 – Dilli

如果這些是你包含的腳本，它將不起作用。你不包括jquery，並且在codepen中沒有提到jquery-one-page。只需按順序添加jquery，jquery-easing和你的索引。 –

我的JavaScript不會加載在python-flask

回答

相關問題