jQuery：将 div css 从 display:none 更改为 display:block 不起作用答案

【问题标题】：jQuery: changing div css from display:none to display:block not workingjQuery：将 div css 从 display:none 更改为 display:block 不起作用
【发布时间】：2013-04-03 14:15:08
【问题描述】：

我正在根据复选框值更改 div 的内容。 div 的值是除一个复选框选项之外的所有内容的简单文本。在异常情况下，div 的值是另一个 div（比如说 childDiv）。

因此，当单击其他两个选项时，我将更改 childDiv 的可见性（display: none 到 jQuery.css()），并在单击异常选项时将其更改为 display: block。

当我更改复选框选项时，childDiv 变为隐藏。但是，当我希望它可见时，它不会再次显示。

小提琴在这里：http://jsfiddle.net/sandeepy02/jLgyp/

代码是

            <div class="switch switch-three candy blue" id="reachout">
                <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/>
                    <label for="tab-41">Experience</label>
                <input name="reachout" type="radio" id="tab-42" value="2"/>
                    <label for="tab-42">Contact Us</label>
                <input name="reachout" type="radio" id="tab-43" value="3"/>
                    <label for="tab-43">Why?</label>
                <div id="test1234">
                    <div id="test12345">
                        Option Start
                    </div>
                </div>
                <span class="slide-button"></span>
            </div>

和

     jQuery("input[name='reachout']",jQuery('#reachout')).change(
        function(e)
        {                   
            if(jQuery(this).val()=="1") 
            {
                jQuery("#test1234").html("");
                jQuery("#test12345").css("display","block");
            }
            if(jQuery(this).val()=="2") 
            {
                jQuery("#test1234").html("Option 2");
                jQuery("#test12345").css("display","none");
            }
            if(jQuery(this).val()=="3") 
            {
                jQuery("#test1234").html("Option 3");
                jQuery("#test12345").css("display","none");
            }
        });

我什至尝试过

            jQuery("#test12345").css('position', 'absolute');
            jQuery("#test12345").css('z-index', 3000);

在display: block 之后但没有用。

谢谢

【问题讨论】：

你可以尝试显示() div 吗？也许这会起作用，因为原始 div 被 display:no 隐藏了。类似于：jQuery("#test12345").css("display","block").show();
@andrew 试过了。还是不行。
附带说明，为了使您的代码更简洁，您可以尝试使用 case/switch 来代替多个 if 语句；)

标签： jquery css

【解决方案1】：

当您设置为 parent 的 html 时，您正在覆盖 div，因此您试图显示不存在的 div。

【讨论】：

【解决方案2】：

看看你的问题是什么：

这个jQuery("#test1234") 是jQuery("#test12345") 的父级，你正在做的是用这些代码行覆盖它的html：

jQuery("#test1234").html("");
jQuery("#test1234").html("Option 2");
jQuery("#test1234").html("Option 3");

在执行此脚本之前，HTML 是这样的：

           <div id="test1234">
                <div id="test12345">
                    Option Start
                </div>
            </div>

现在当你的脚本被执行时，它看起来像这样：

这个jQuery("#test1234").html(""); 的输出是这样的：

           <div id="test1234">

            </div>

通过这个jQuery("#test1234").html("Option 2"); 输出是这样的：

           <div id="test1234">
                Option 2
            </div>

通过这个jQuery("#test1234").html("Option 2"); 输出就像：

           <div id="test1234">
                Option 3
            </div>

所以你正在做 display : block 一个在脚本执行后不存在于 dom 中的元素。

【讨论】：

【解决方案3】：

jquery 中只有一个变化！！

jQuery("input[name='reachout']",jQuery('#reachout')).change(
                function(e)
                {                   
                    if(jQuery(this).val()=="1") 
                    {
            --> change in this line         jQuery("#test1234").html("Option Start");
                        jQuery("#test12345").css('position', 'absolute');
                        jQuery("#test12345").css("display","block");
                        jQuery("#test12345").css('z-index', 3000);
                    }
                    if(jQuery(this).val()=="2") 
                    {
                        jQuery("#test1234").html("Option 2");
                        jQuery("#test12345").hide();
                    }
                    if(jQuery(this).val()=="3") 
                    {
                        jQuery("#test1234").html("Option 3");
                        jQuery("#test12345").hide();
                    }
                });

【讨论】：

【解决方案4】：

根据 Andrew 的评论，我决定将 div 分开而不是父子。

此后它可以按我的意愿正常工作。

代码的变化是：

<div class="switch switch-three candy blue" id="reachout">
                        <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/>
                            <label for="tab-41">Experience</label>
                        <input name="reachout" type="radio" id="tab-42" value="2"/>
                            <label for="tab-42">Contact Us</label>
                        <input name="reachout" type="radio" id="tab-43" value="3"/>
                            <label for="tab-43">Why?</label>
                        <div id="test1234">
                        </div>
                            <div id="test12345">
                                Option Start
                            </div>
                        <span class="slide-button"></span>
                    </div>

和

         jQuery("input[name='reachout']",jQuery('#reachout')).change(
            function(e)
            {                   
                if(jQuery(this).val()=="1") 
                {
                    jQuery("#test1234").hide();
                    jQuery("#test12345").show();
                }
                if(jQuery(this).val()=="2") 
                {
                    jQuery("#test1234").html("Option 2");
                    jQuery("#test1234").show();
                    jQuery("#test12345").hide();
                }
                if(jQuery(this).val()=="3") 
                {
                    jQuery("#test1234").html("Option 3");
                    jQuery("#test1234").show();
                    jQuery("#test12345").hide();
                }
            });

【讨论】：

【解决方案5】：

你的身份证对吗？

jQuery("#test1234").html("");
jQuery("#test12345").css("display","block")

【讨论】：

是的...我也粘贴了html

【解决方案6】：

像下面这样使用

// xxx is your div id
$('#xxx').hide();
$('#xxx').show();

它会正常工作的。

【讨论】：

【解决方案7】：

我已经根据一些建议重新配置了您的代码，它现在应该可以工作了。

http://jsfiddle.net/jquery4u/nPMvV/

(function ($) {

    $("input[name='reachout']").on('change', function (e) {
        var checkVal = $(this).val();
        console.log(checkVal);

        //cache elements which are used often
        var $test1234 = $("#test1234"),
            $test12345 = $("#test12345");

        //use a switch statement instead of long winded if else
        switch (checkVal) {
            case "1":
                $test1234.html("Option 1");
                $test12345.show();
                break;
            case "2":
                $test1234.html("Option 2");
                $test12345.hide();
                break;
            case "3":
                $test1234.html("Option 2");
                $test12345.hide();
                break;

        }
    });
})(jQuery);

【讨论】：