Question

选择单选按钮后，根据用户的选择，我无法重定向到X页到Y页。控制台给我写信：

Uncaught ReferenceError:  onClickGo is not defined

我在my-app.json中声明了页面

routes: [
{
    name: 'home',
    path: '/home/',
    url: './pages/home/home.html'
},
{
    name: 'travel',
    path: '/travel/',
    url: './pages/travel/travel.html',
    routes: [

        {
            name: 'travel-ny',
            path: ' ny/',
            url: './pages/travel/ny.html',
        },
        {
            name: 'travel-la',
            path: ' la/',
            url: './pages/travel/la.html',
        },

        {
            name: 'travel-milan',
            path: ' milan/',
            url: './pages/travel/milan.html',
        },

    ]
}

用户的选择来自travel.html

<div data-name="travel" class="page">

<div class="page-content pg-no-padding">

<div class="row">
    <div class="col-100 tablet-100 desktop-100">            
    <form class="list" id="travel-form">
            <ul>
                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="ny" checked="checked"/>
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">New York</div>
                        </div>
                    </label>                            
                </li>

                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="la"/>
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">Los Angeles</div>
                        </div>
                    </label>                            
                </li>

                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="milan" />
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">Milan</div>
                        </div>
                    </label>                            
                </li>

        </form> <!--list--> 

        <div class="block">
            <a class="button button-fill travelChoice" onclick="onClickGo()">Go</a>
        </div>      
    </div><!--col-100-->
</div><!--row-->

我将onClickGo函数放入travel.js中，并以此方式将其包含在home.html中

<script type="text/javascript" src="js/travel.js"></script>

travel.js

const onClickGo = () => {
   $$('.travelChoice').on('click', function(){

    //retrieve the value selected
    var selectedValue = $$('.list input:checked').val();
   //go to the page 
   router.navigate('/travel/'+ selectedValue +'/');

}

提前谢谢

Answer 1

我认为您需要尝试此操作，因为html加载后才找到您的函数：

 $$('.travelChoice').on('click', function(){

    //retrieve the value selected
    var selectedValue = $$('.list input:checked').val();
   //go to the page 
   router.navigate('/travel/'+ selectedValue +'/');
}

不用onClickGo变量将其包装，也不必从按钮中删除click事件

<a class="button button-fill travelChoice">Go</a>

...我认为它会起作用.....也尝试使用它进行导航：

self.app.router.navigate('/travel/'+ selectedValue, {reloadCurrent: true});

通过添加reloadCurrent，您可以从兑现的html页面中打开页面而不会公平

使用framework7选择单选按钮后，重定向到另一个页面

1 个答案: