jQuery：将 div css 从 display:none 更改为 display:block 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15779804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: changing div css from display:none to display:block not working
提问by user1517108
I am changing the content of a div based on the checkbox value. the value of the div is simple text for all but one checkbox option. In the exception case, the value of div is another div (lets say childDiv).
我正在根据复选框值更改 div 的内容。div 的值对于除一个复选框选项之外的所有选项都是简单的文本。在例外情况下，div 的值是另一个 div（比如说 childDiv）。
So I am changing the the visibility of the childDiv (display: nonethrough jQuery.css()) when the other two options are clicked, and changing it to display: blockwhen the exception option is clicked.
因此，当单击其他两个选项时，我正在更改 childDiv（display: none通过jQuery.css()）的可见性，并在单击display: block异常选项时将其更改为。
The childDiv becomes hidden when I change checkbox option. However it does not display back again when I want it to be visible.
当我更改复选框选项时，childDiv 变得隐藏。但是，当我希望它可见时，它不会再次显示回来。
The fiddle is here: http://jsfiddle.net/sandeepy02/jLgyp/
小提琴在这里：http: //jsfiddle.net/sandeepy02/jLgyp/
The code is
代码是
<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>
and
和
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");
}
});
I even tried
我什至试过
jQuery("#test12345").css('position', 'absolute');
jQuery("#test12345").css('z-index', 3000);
after display: blockbut that didnt work.
之后display: block但那没有用。
Thanks
谢谢
回答by Musa
You are overwriting the div when you set is parent 's html, so you're trying to show a div thats not there.
当您设置 is parent 的 html 时，您正在覆盖 div，因此您试图显示一个不存在的 div。
回答by Jai
See what is your problem:
看看你的问题是什么：
This jQuery("#test1234")is the parent of jQuery("#test12345")and what you are doing is overwritten the html of it with these lines of code:
这jQuery("#test1234")是 的父级jQuery("#test12345")，您正在做的是用以下代码行覆盖它的 html：
jQuery("#test1234").html("");
jQuery("#test1234").html("Option 2");
jQuery("#test1234").html("Option 3");
See before this script's execution the HTMLwas like this:
在此脚本执行之前，看到它HTML是这样的：
<div id="test1234">
<div id="test12345">
Option Start
</div>
</div>
Now when your scripts gets executed then it looks like this:
现在当你的脚本被执行时，它看起来像这样：
by this jQuery("#test1234").html("");output is like:
通过这个jQuery("#test1234").html("");输出是这样的：
<div id="test1234">
</div>
by this jQuery("#test1234").html("Option 2");output is like:
通过这个jQuery("#test1234").html("Option 2");输出是这样的：
<div id="test1234">
Option 2
</div>
and by this jQuery("#test1234").html("Option 2");output is like:
通过这个jQuery("#test1234").html("Option 2");输出是这样的：
<div id="test1234">
Option 3
</div>
So you are doing display : blockan element which is not present in the dom after script execution.
因此，您正在执行display : block脚本执行后在 dom 中不存在的元素。
回答by Hunter Zhao
Just use like below
只需像下面这样使用
// xxx is your div id
$('#xxx').hide();
$('#xxx').show();
It'll work fine.
它会工作得很好。
回答by Sam Deering
I have reconfigured your code with some suggestions it should work now.
我已经用一些建议重新配置了您的代码，它现在应该可以工作了。
http://jsfiddle.net/jquery4u/nPMvV/
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);
回答by Sankalp Mishra
Just one change in jquery!!
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();
}
});
回答by user1517108
Based on Andrew's comment, I decided to put the divs seperate instead of parent-child.
根据安德鲁的评论，我决定将 div 分开而不是父子分开。
Thereafter it works fine as I desire.
此后，它按我的意愿正常工作。
The change in code is:
代码的变化是：
<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>
and
和
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();
}
});
回答by John
Is your Id correct ?
你的身正确吗？
jQuery("#test1234").html("");
jQuery("#test12345").css("display","block")
