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

Question

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

Uncaught ReferenceError:  onClickGo is not defined

我声明了我的页面-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 变量包装它，并从按钮中删除点击事件

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

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

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

通过添加 reloadCurrent，您可以从已兑现 html 页面

打开页面而无需公平

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

Redirect to another page after radio button selection using framework7

javascript

html-framework-7