Javascript 在'上隐藏动态生成的div；单击事件'；

我正在做一个项目，我已经动态创建了4个div，第一个是“display:block”。当我点击下一步时，我将得到第二个div作为“display:block”，第1、3、4个div作为“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>

/*首先检查单击我的4个可单击按钮时只需显示一个div-失败；( */ 
$（文档）.ready（函数（）{
$（'span#backPage'）。单击（函数（）{
var alpha1=$（'div.ui-formwizard-content'）.css（'display'，'block'）；
$（'div.ui-formwizard-content'）.css（'display'，'none'）；
字母1.css（'display'，'block'）；
});
$（'span#nextPage'）。单击（函数（）{
var alpha1=$（'div.ui-formwizard-content'）.css（'display'，'block'）；
$（'div.ui-formwizard-content'）.css（'display'，'none'）；
字母1.css（'display'，'block'）；
});
$（'span#prevField'）。单击（函数（）{
var alpha1=$（'div.ui-formwizard-content'）.css（'display'，'block'）；
$（'div.ui-formwizard-content'）.css（'display'，'none'）；
字母1.css（'display'，'block'）；
});
$（'span#nextField'）。单击（函数（）{
var alpha1=$（'div.ui-formwizard-content'）.css（'display'，'block'）；
$（'div.ui-formwizard-content'）.css（'display'，'none'）；
字母1.css（'display'，'block'）；
});
/*这是一次只能显示1个div的双重检查，但也失败了*/
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'）；}
});

如果有人能帮我摆脱这种多重显示的混乱局面：一块动态生成的div，我会很高兴的！；（我已经尝试了对所有人隐藏（），对所选的人显示（）。

---

我尝试了所有方法，但问题仍然存在。如果新的div被阻止，我不知道如何隐藏所有其他div！

快速且未经测试。主要是为了显示不必要的代码。也许这会帮助您跟踪问题

 $(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();
        }

    });

---

编辑后的

请添加您的html。我通常喜欢使用

.show（）

和

.hide（）

而不是

.css（'display'，'block'）。css（'display'，'block'）；

和var alpha1。我通常喜欢使用

.show（）

和

.hide（）

，而不是

.css（'display'，'none'））；

看起来您正在将元素的显示设置为“阻止”，然后设置为“无”，然后再设置回“阻止”。可能只是

$（'div.ui-formwizard-content'）。show（）；

？我已经尝试了对all和show（）隐藏（）对于选定的一个。请按照@Ted所说的添加html。代码混乱且不必要地臃肿。使用html，我们可以帮助您简化此过程并使其正常工作。