3

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

因此，当单击其他两个选项时，我将更改 childDiv ( display: nonethrough ) 的可见性，并将其更改为单击异常选项时。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但这没有用。

谢谢

4

7 回答 7

5

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

于 2013-04-03T05:55:49.190 回答
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 中不存在的元素。

于 2013-04-03T06:05:58.057 回答
0

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();
                    }
                });
于 2013-04-03T05:57:50.167 回答
0

根据安德鲁的评论，我决定将 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();
                }
            });
于 2013-04-03T05:58:53.457 回答
0

你的身份证对吗？

jQuery("#test1234").html("");
jQuery("#test12345").css("display","block")
于 2013-04-03T06:01:43.403 回答
0

像下面这样使用

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

它会正常工作的。

于 2013-04-03T06:10:08.987 回答
0

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

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);
于 2013-04-03T06:15:08.057 回答