Question

我正在尝试在多个屏幕中制作1个表格，1个提交按钮。这就是我到目前为止所得到的，但我陷入了jquery，并希望有人能帮助我说出我在这里做错了什么。

<html>
<body>
    <form action="" method="post">
    <ul id="stappen">
        <li id="step_1" class="selected">1. step_1</li>
        <li id="step_2" class="">2. step_2</li>
        <li id="step_3" class="">3. step_3</li>
        <li id="step_4" class="">4. step_4</li>
    </ul>
    <div id="stappen">
        <div id="content_step_1" class="content_step" style="display: block;">content step 1</div>
        <div id="content_stap_2" class="content_step" style="display: none;">content step 2</div>
        <div id="content_stap_3" class="content_step" style="display: none;">content step 3</div>
        <div id="content_stap_4" class="content_step" style="display: none;">content step 4</div>
    </div>
    </form>
</body>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
    <script>
    (function() {
        var body = $('body');
        $('.step_2').bind('click', function(){
            body.toggleClass('step_2');
            return false;
        });
    })();
</script>
</html>

我不想做的事情是：点击li step_2时，li id =“step_2”class =“” - 将“class”更改为“selected”，将“display”更改为“block”，就像此代码中的“block”一样，此时步骤1被选中并显示：block。所有这一切都改变了步骤1中的所有内容必须与其他所有内容相同:) - ＆gt;类为空并显示为无。

我知道jquery代码有问题，但我不知道如何让它变得更糟。每次尝试我都会错误地转换或者无法正常工作，这就是为什么ifill在脚本中我知道这是非常好的。

我希望有人可以帮助我和/或指出我正确的方向。

先进的thnx。

Answer 1

您不应该在HTML中重复ID。对于"stappen"和UL以下的DIV重复了<ul id="ul_stappen"> ... </ul> <div id="div_stappen"> .. </div>。

我们假设UL id是“ul_stappen”而DIV id是“div_stappen”：

$( '#ul_stappen' ).on('click', 'li', function() {
    if ( $(this).hasClass('selected') ) {
        return;
    };

    // show hide proper content divs
    var oldIndex = $ulStappen.find( 'selected' ).index();
    var newIndex = $(this).index();
    $( '#div_stappen li' ).eq( oldIndex ).hide();
    $( '#div_stappen li' ).eq( newIndex ).show();

    // add/remove 'selected' for proper li's
    // this must be the last part to be done
    $( '#ul_stappen' ).find( 'selected' ).removeClass( 'selected' );
    $(this).addClass( 'selected' );
});

现在我们可以使用下面的jQuery代码实现您所需的效果：

{{1}}

祝你好运，玩得开心！

Answer 2

第一个问题：你有两个具有相同id的元素（steppen）。这是一个错误。为了使我的代码能够工作，你需要在＆＃34; steppendiv＆＃34;中更改第二个元素id。第二个问题：第一个内容id是步骤，而其他三个是stAp（使用＆＃34; a＆＃34;而不是＆＃34; e＆＃34;）。为了让我的代码能够工作，您需要更改它们并使所有内容成为＆＃34; content_step_1＆＃34; （_2 _3等）

$(document).ready(function () {
    $( "#stappen" ).on( "click", "li", function() {
        $( "#stappen li" ).removeClass( "selected" );
        $( this ).addClass( "selected" );
        var liId = $( this ).attr( "id" );
        var splittedId = liId.split( "_" );
        var newId = "#content_step_" + splittedId[ 1 ];
        $( "#stappendiv > div" ).hide();
        $( newId ).show();
    });
});

Answer 3

正如@Ricardo所说，你不能使用与DIV相同的ID。你必须解决它。这里改进了您的代码版本示例： HTML

  <body>
        <form action="" method="post">
        <ul id="ul_stappen">
            <li id="step_1" class="selected">1. step_1</li>
            <li id="step_2" class="">2. step_2</li>
            <li id="step_3" class="">3. step_3</li>
            <li id="step_4" class="">4. step_4</li>
        </ul>
        <div id="div_stappen">
            <div id="content_step_1" class="content_step" style="display: block;">content step 1</div>
            <div id="content_stap_2" class="content_step" style="display: none;">content step 2</div>
            <div id="content_stap_3" class="content_step" style="display: none;">content step 3</div>
            <div id="content_stap_4" class="content_step" style="display: none;">content step 4</div>
        </div>
        </form>
    </body>

CSS

  .selected{color:red}

JAVSCRIPT

(function() {
            $('#ul_stappen>li').on('click',function(){
                if(!$(this).hasClass('selected')){
                $('.selected').removeClass('selected');
                $(this).addClass('selected');
                $('#div_stappen>div').filter(function(){return $(this).css('display')==='block'}).hide();
                $('#div_stappen>div').eq($(this).index()).show();   
                }
            });

    })();

Working JSFIDDLE example

希望这能帮到你

jquery类和显示更改。

3 个答案: