Javascript 单击链接后加载部分内容_Javascript_Jquery_Handlebars.js

Javascript 单击链接后加载部分内容

javascript jquery

Javascript 单击链接后加载部分内容,javascript,jquery,handlebars.js,Javascript,Jquery,Handlebars.js,在我的应用程序中，我需要手动更改主div，即我的内容所在的位置，但同时，页脚和页眉总是相同的。主要部门是一系列的把手部分创建的帮助。每个div只需单击一个链接即可更改。直到现在，我的代码非常简单： $( document ).ready(function() { $('section').on('click', '.next', function(){ moveToNextSection(event); }); }); function moveToN

在我的应用程序中，我需要手动更改主div，即我的内容所在的位置，但同时，页脚和页眉总是相同的。主要部门是一系列的把手部分创建的帮助。每个div只需单击一个链接即可更改。直到现在，我的代码非常简单：

$( document ).ready(function() {

    $('section').on('click', '.next', function(){
        moveToNextSection(event);
    });

});

function moveToNextSection(event){
    event.preventDefault();
    var currentSection = event.currentTarget;
    var nextSectionId = $(currentSection).find('.next').attr('href');

    $(currentSection).closest('section').hide();
    // var newSection = find section with nextSectionId as id
    // $(newSection).show();

}

home.hbs部分：

<section id="home">
    <h2>Welcome Home of {{projectName}}</h2> 
    <p>I'm the landing and first page </p>  
    <a href="aborto" class="next"> Click here to go to second step </a> 
</section>

aborto.hbs parial：

<section id="aborto">
    <h1>I'm the second page</h1>
    <p>
        Sei in cinta e devi abortire? Cerca qui le info necessarie!
    </p>   
</section>

但我只是意识到，使用我的方法，我需要DOM中已经加载的所有div，而我没有

当点击链接时，你知道如何加载hbs部分吗

创建预编译的车把模板是我唯一的选择吗

欢迎使用任何新方法：

类似这样的方法：使用jquery加载和您的代码：$currentSection.find'.next'.attr'href'在您的上下文中不直接使用：

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>

<section id="home">
    <h2>Welcome Home of {{projectName}}</h2>
    <p>I'm the landing and first page </p>
    <a href="http://www.localhost/aborto.hbs" ID="aborto" class="next"> Click here to go to second step </a>
</section>


</body>
<script>

$( document ).ready(function() {

    $('section').on('click', '.next', function(event){
        moveToNextSection(event);
    });

});

function moveToNextSection(event){
    event.preventDefault();
    var currentSection = event.currentTarget;
    var nextSectionId = $(currentSection).attr('id');

    $(currentSection).closest('section').hide();

    var nextPartialUrl = $(currentSection).attr('href');

    var wrapper = $('<div id="wrapper"><div></div></div>')
    wrapper.load(nextPartialUrl)

    $($(currentSection).closest('section')).after(wrapper);

    $('#' + nextSectionId).show();

}
</script>
</html>

您需要访问此页面：

还这个

<section id="aborto">
    <h1>I'm the second page</h1>
    <p>
        Sei in cinta e devi abortire? Cerca qui le info necessarie!
    </p>   
</section>

最后，我决定采用以下解决方案：我在index.html中包含了我的所有部分

<html>
<head>
  <meta charset="UTF-8">
</head>

<body>

{{> home}}
{{> aborto}}

</body>
</html>

这可能不是最漂亮的解决方案，因为意味着添加许多部分现在只有两个，但应用程序计划有50个部分，但这是一个做我现在需要的

很高兴听到新的解决方案

这是我的第一个方法，但该页面只是一部分，因此不，我无法访问：

$( document ).ready(function() {

    $('section').on('click', '.next', function(){
        moveToNextSection(event);
    });

});

function moveToNextSection(event){
    event.preventDefault();
    var currentSection = event.currentTarget;
    var nextSectionId = $(currentSection).find('.next').attr('href');

    $(currentSection).closest('section').hide();
    $('#' + nextSectionId).show();
}