【Web前端问题】steps.js 步骤条点击问题？

• Z时代
• 2024-01-10
• 分类：技术分享

 <script>
    var steps1 = steps({
            el: "#steps1",
            data: [
                { title: "步骤1", description: "",customHtml: "<div>我是1的自定义内容</div>"},
                { title: "步骤2", description: "",customHtml: "<div>我是1的自定义内容</div>"},
                { title: "步骤3", description: "",customHtml: "<div>我是1的自定义内容</div>"},
                { title: "步骤4", description: "" ,customHtml: "<div>我是1的自定义内容</div>"}
            ],
            sides: "start-single",
            iconType: "bullets",
            center: true,
            active: 0
    });
    $(function(){
        $(".steps-row-center .step:eq(0)").on("click",function(){
            steps1.setActive(0);
        });
        $(".steps-row-center .step:eq(1)").on("click",function(){
            steps1.setActive(1);
        });
        $(".steps-row-center .step:eq(2)").on("click",function(){
            steps1.setActive(2);
        });
        $(".steps-row-center .step:eq(3)").on("click",function(){
            steps1.setActive(3);
        })
    })
</script>

上面var定义的是插件的方法，active是步骤条的状态，代表的是进度条，num类型，我现在给每个圆圈点击事件（圆圈都是相同的class），插件给了方法可以设置active的值，steps1.setActive(num)可以设置它的值，但是我给的点击事件只有第一次点击有效，第二次点击就没有效果了。怎么解答？

回答：

感觉应该是被替换掉了，试试这样

$(".steps-row-center").on("click", ".step:eq(0)",function(){
    steps1.setActive(0);
});

回答：

博主是怎么解决的啊。我也遇到同样的问题

以上是 【Web前端问题】steps.js 步骤条点击问题？ 的全部内容， 来源链接： utcz.com/a/141678.html