html - 单击按钮更改铁页的选定值

我正在使用聚合物启动工具包作为这个项目的基础。
我正在尝试制作两个按钮，将用户带到铁页元素中的下一页和上一页。

<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”，并使用与starter工具包用于菜单的数据路由相同的方法，但是我无法使用它。我还尝试在脚本文件中创建一个函数来侦听单击事件，但它在错误的iron page元素中更改了页面。它跳到菜单的下一页。
是否可以让“下一步”按钮以某种方式将所选值更改为“2”？

最佳答案

你可以这样做。
给你的铁页组件和按钮一个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>

编辑
如果您使用的是starter kit的结构，那么可以尝试将button click处理程序添加到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;
     });
});