Question

我正在根据复选框值更改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之后但是没有用。

由于

Answer 1

当你设置为父的html时，你正在覆盖div，所以你试图显示不存在的div。

Answer 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中不存在的元素。

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

Answer 4

根据安德鲁的评论，我决定将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();
                }
            });

Answer 5

你的身份证是否正确？

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

Answer 6

只需使用如下

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

它会正常工作。

Answer 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);

jQuery：将display css从display：none更改为：block not working

7 个答案: