Question

我正在尝试使用jquery来浏览表单的每个问题，以隐藏/显示表单的其他部分。第一个下一个单击功能用于更改ID，但第二个不会注册。我知道我必须遗漏一些明显的东西。谢谢。

jQuery(document).ready(function ($) {
        $("#prev").hide()
        $("#item-vfb-42").hide()
        $("#item-vfb-43").hide()
        $("#item-vfb-31").hide()
        $("#item-vfb-44").hide()
        $("#item-vfb-45").hide()
        $("#item-vfb-46").hide()
        $("#item-vfb-47").hide()
    $("#next").click(function () {
        $("#next" ).prop( "id", "next1" );
        $("#prev").show()
        $("#item-vfb-30").hide()  
        $("#item-vfb-42").show()
    }); 
    $("#next1").click(function () {
        $("#next1" ).prop( "id", "next2" ); 
        $("#item-vfb-42").hide()
       $("#item-vfb-43").show()
    });
    $("#next2").click(function () {
        $("#next2" ).attr( "id", "next3" ); 
        $("#item-vfb-43").hide()
       $("#item-vfb-31").show()
    });
    $("#next3").click(function () {
        $("#next3" ).attr( "id", "next4" ); 
        $("#item-vfb-31").hide()
       $("#item-vfb-44").show()
    });
    $("#next4").click(function () {
        $("#next4" ).attr( "id", "next5" ); 
        $("#item-vfb-44").hide()
       $("#item-vfb-45").show()
    });
    $("#next5").click(function () {
        $("#next5" ).attr( "id", "next6" ); 
        $("#item-vfb-45").hide()
       $("#item-vfb-46").show()
    });
    $("#next6").click(function () {
        $("#prev6").hide()
        $("#next6" ).attr( "id", "next7" ); 
        $("#item-vfb-46").hide()
       $("#item-vfb-47").show()
    });
    $("#prev").click(function () {
        $("#next1" ).attr( "id", "next" );
        $("#prev").hide()
        $("#item-vfb-30").show()
        $("#item-vfb-42").hide() 
    });             
});

Answer 1

您应该更改例如：

$("#next6").click(function () {
//some code
});

到

$("#next6").on("click",(function () {
//some code
});

Answer 2

问题是，当页面加载时，您的所有点击功能都会被注册。在页面加载时，只存在#next，因此您的其他任何功能都不起作用。我会通过使用data-属性来修复此问题，并在单击按钮时进行检查。

假设您的按钮如下所示：

<button id="#next" data-step="0">Next</button>

然后你可以这样做：

$('#next').click( function( ) {
    var step = $(this).attr('data-step');

    if( step == 0 )
    {
        //do stuff for inital click
        $(this).attr('data-step', 1); //set attribute to next step
    }

    if( step == 1 )
    {
      //do stuff for next step...
      //etc etc...
    }
});

Answer 3

问题在于，当您尝试攻击时，$('#next1')的点击绑定尚不存在。

您可以尝试这样做：

$("#next").click(function(){
    $("#next").prop( "id", "next1" );
    $("#prev").show();
    $("#item-vfb-30").hide() ; 
    $("#item-vfb-42").show();
    $("#next1").click(function(){
        // continue nesting your click bindings so they don't get called until the element exists.
    });
});

javascript更改属性仅在第一次单击时起作用

3 个答案: