按钮点击更改铁页选择值

Question

我正在使用Polymer Starter Kit作为此项目的基础.

我正在尝试制作两个按钮,将用户带到铁页元素中的下一页和上一页.

<iron-pages selected="0">
                <div>
                    <paper-material elevation="1">
                        <paper-radio-group class="layout vertical" selected="1">
                            <paper-radio-button name="1">1</paper-radio-button>
                            <paper-radio-button name="2">2</paper-radio-button>
                            <paper-radio-button name="3">3</paper-radio-button>
                        </paper-radio-group>
                    </paper-material>
                    <div class="horizontal justified layout">
                        <div>
                            <paper-button raised>Previous</paper-button>
                        </div>
                        <div>
                            <paper-button raised>Next</paper-button>
                        </div>
                    </div>
                </div>
                <div>Page 2</div>
                <div>Page 3</div>
                </iron-pages>

值得注意的是,这个铁页元素放置在入门套件用于处理菜单项的铁页元素内.

我已经尝试了一些方法来完成这项工作.我尝试将div更改为"sections",并使用与入门工具包用于带有数据路径的菜单相同的方法,但我无法使用它.我还尝试在脚本文件中创建一个函数来侦听click事件但是它在错误的iron-page元素中更改了页面.它跳转到菜单中的下一页.

有可能只是让"下一步"按钮以某种方式将所选值更改为"2"吗？

Answer 1

这是你如何做到的.给你的铁页组件和按钮一个id,这样以后就很容易找到它们.

<iron-pages id="pages" selected="0">

    <paper-button raised id="next">Next</paper-button>

定义事件处理程序并通过其id引用铁页.然后,您可以设置selected要跳转到的页码(从0开始)或调用selectedNext()跳转到下一页.

<script>
    var pages = document.querySelector("#pages");
    var next = document.querySelector("#next");
    next.addEventListener("click", function(){
        // choose an option here
        pages.selectNext();
        pages.selected = 2;
        pages.selected = pages.selected +1;  
     });
</script>

编辑 如果使用入门工具包的结构,可以尝试将按钮单击处理程序添加到dom-change回调中.

app.addEventListener('dom-change', function() {
    console.log('Our app is ready to rock!');

    var pages = document.querySelector("#pages");
    var next = document.querySelector("#next");
    next.addEventListener("click", function(){
        // choose an option here
        pages.selectNext();
        pages.selected = 2;
        pages.selected = pages.selected +1;  
     });
});