隐藏“点击事件”中动态生成的div

Question

我正在一个项目中，我已经动态创建了4个div，第一个是“ display：block”。 当我单击下一步时，我将第二个div作为“ display：block”，将第1、3、4th作为“ display：none”； 问题是当我快速单击下一个按钮2次时-2 divs显示“ display：block”，并且两者都在屏幕上看到。 我已经尝试了以下代码，但是我对此感到受够了。 有什么方法可以控制动态生成的div的显示隐藏？

 <script>

/* First check up that only one div must show on click of my 4 clickable buttons - failed .. ;( */ 

        $(document).ready(function(){
            $('span#backPage').click(function(){
                var alpha1 = $('div.ui-formwizard-content').css('display','block');
                $('div.ui-formwizard-content').css('display','none');
                alpha1.css('display','block');
            });
            $('span#nextPage').click(function(){
                var alpha1 = $('div.ui-formwizard-content').css('display','block');
                $('div.ui-formwizard-content').css('display','none');
                alpha1.css('display','block');
            });
            $('span#prevField').click(function(){
                var alpha1 = $('div.ui-formwizard-content').css('display','block');
                $('div.ui-formwizard-content').css('display','none');
                alpha1.css('display','block');
            });
           $('span#nextField').click(function(){
                var alpha1 = $('div.ui-formwizard-content').css('display','block');
                $('div.ui-formwizard-content').css('display','none');
                alpha1.css('display','block');
            });

/* This is double check that only 1 div must show at one time - but failing too */

           if($('div#step_0').css('display','block')){$('div.step').css('display','none');$(this).css('display','block');}

           if($('div#step_1').css('display','block')){$('div.step').css('display','none');$(this).css('display','block');}

           if($('div#step_2').css('display','block')){$('div.step').css('display','none');$(this).css('display','block');}

           if($('div#step_3').css('display','block')){$('div.step').css('display','none');$(this).css('display','block');}

        });

     </script>

如果有人可以帮助我摆脱这种混乱的多重展示：动态生成的div块，我会很高兴的！ ;（我尝试了所有人的hide（）和show（）来进行选择。我已经尝试了所有方法，但是问题仍然存在。如果新的div被阻止，我不知道如何隐藏所有其他div！

Answer 1

快速且未经测试。 主要是显示您不必要的代码。 也许它将帮助您找到问题所在。

 $(document).ready(function(){
        $('span#backPage').click(function(){
            showAlpha(this);
        });
        $('span#nextPage').click(function(){
            showAlpha(this);
        });
        $('span#prevField').click(function(){
            showAlpha(this);
        });
       $('span#nextField').click(function(){
            showAlpha(this);
        });

        function showAlpha(_this) {
            var alpha1 = $('div.ui-formwizard-content');
            alpha1.show();
            // Get the correct active child here html would help figure out how in your case
            var child = ???;
            $('div.step').hide();
            $(child).show();
        }

    });

已编辑