javascript JQuery .show() 方法在 .hide 后不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24841524/
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 .show() method not Working After .hide
提问by user2938543
I am working with a JQuery script that allows a checkbox (its class name is "adminCheckBox") to show or hide various objects on the screen based on whether or not it is checked.
我正在使用一个 JQuery 脚本，它允许复选框（它的类名是“adminCheckBox”）根据是否被选中在屏幕上显示或隐藏各种对象。
The hiding function works fine. However, after the elements have been hidden and I press the checkbox again, the elements do not appear again. Are there any ideas as to why this may be? Thank you.
隐藏功能工作正常。但是，在隐藏元素并再次按下复选框后，元素不会再次出现。有没有关于为什么会这样的想法？谢谢你。
$(document).ready(function(){
$(".adminCheckbox").click(function(){
if(!document.getElementsByClassName("adminCheckBox").checked){
$(".deleteImageButton").hide(500);
$(".addHeading").hide(500);
$(".deleteHeadingButton").hide(500);
$(".fileUpload").hide(500);
$(".fileUploadSubmit").hide(500);
}else{
$(".deleteImageButton").show();
$(".addHeading").show();
$(".deleteHeadingButton").show();
$(".fileUpload").show();
$(".fileUploadSubmit").show();
}
});
});
Below is the HTML for the checkbox in question.
以下是相关复选框的 HTML。
<br><div class="adminControls"><input type="checkbox" class="adminCheckbox" checked="checked"><div class="checkBoxText"> Admin Controls</div></div>
采纳答案by CRABOLO
I strongly recommend just using .toggle()instead for this. Shorten up the code a lot just with that. Also, you can further optimize it just by giving all those elements a same class, if you want.
我强烈建议为此只使用.toggle()。只需这样就可以大大缩短代码。此外，如果需要，您可以通过为所有这些元素提供相同的类来进一步优化它。
$(".adminCheckbox").click(function(){
$(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle();
});
You can also place a number value for toggle to do an animation on hide and show, like .toggle(500)
您还可以为切换设置一个数字值以在隐藏和显示时执行动画，例如 .toggle(500)
回答by imbondbaby
Use .toggle()function to hide and show your buttons.
使用.toggle()函数来隐藏和显示您的按钮。
And use the .change()event/handler instead of .click().
并使用.change()事件/处理程序而不是.click().
According to the jQuery API:
根据 jQuery API：
The
changeevent is sent to an element when its value changes. This event is limited to<input>elements,<textarea>boxes and<select>elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
change当元素的值发生变化时，该事件被发送到元素。此事件仅限于<input>元素、<textarea>框和<select>元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会推迟到该元素失去焦点时。
Try this:
试试这个：
$(document).ready(function () {
$('.adminCheckbox').on('change', function () {
$(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle(500);
});
});
回答by sunil
<?php
?>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#lap1").click(function(){
prodtype="laptop";
$("#cam").hide();
$("#mob").hide();
$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").show(function(){
rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});
$.ajax({
type:'GET',
url:'alldisplay.php',
data:"prodtype="+prodtype,
success:function(response){
document.getElementById("right").innerHTML=response;
}
});
});
$("#came").click(function(){
prodtype="camera";
$("#mob").hide();
$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").show(function(){
rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});
$.ajax({
type:'GET',
url:'alldisplay.php',
data:"prodtype="+prodtype,
success:function(response){
document.getElementById("right").innerHTML=response;
}
});
});
$("#mobi").click(function(){
prodtype="mobile";
$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").show(function(){
rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});
$.ajax({
type:'GET',
url:'alldisplay.php',
data:"prodtype="+prodtype,
success:function(response){
document.getElementById("right").innerHTML=response;
}
});
});
$("#scrv").click(function(){
prodtype="clothes";
$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").hide();
$("#scarves").show(function(){
rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});
$.ajax({
type:'GET',
url:'alldisplay.php',
data:"prodtype="+prodtype,
success:function(response){
document.getElementById("right").innerHTML=response;
}
});
});
$("#bagg").click(function(){
prodtype="bags";
$("#scarves").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").hide();
$("#bag").show(function(){
rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});
$.ajax({
type:'GET',
url:'alldisplay.php',
data:"prodtype="+prodtype,
success:function(response){
document.getElementById("right").innerHTML=response;
}
});
});
$("#glasss").click(function(){
prodtype="glass";
$("#scarves").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").hide();
$("#bag").hide();
$("#glass").show(function(){
rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});
$.ajax({
type:'GET',
url:'alldisplay.php',
data:"prodtype="+prodtype,
success:function(response){
document.getElementById("right").innerHTML=response;
}
});
});
$("#left").click(function(){
rates = document.getElementsByName('lap');
for(var i = 0; i < rates.length; i++){
if(rates[i].checked){
rate_value = rates[i].value;
alert(rate_value);
$.ajax({
type:'GET',
url:'branddisplay.php',
data:'brand='+rate_value+"&prodtype="+prodtype,
success:function(response){
document.getElementById("right").innerHTML=response;
}
});
}
}
});
});
</script>
<center>
<div id="menu" style="font-size:20px;text-decoration:none;height:30px;width:800px;background-color:#A0A0A0 ">
<span id="lap1">laptop   </span>
<span id="came">camera   </span>
<span id="mobi">mobile   </span>
<span id="scrv">Scarves   </span>
<span id="bagg">Bag   </span>
<span id="glasss">Glass   </span>
</div>
</center><br>
<div id="left" style="float:left;text-decoration:none;height:1000px;width:200px;background-color:#66CCFF ">
<div id="lapy">
<form name="input" method="get">
<input type="radio" name="lap" value="sony" /> sony<br />
<input type="radio" name="lap" value="samsuze" /> samsuze<br />
<input type="radio" name="lap" value="sony " /> sony<br />
<input type="radio" name="lap" value="tosiba" /> tosiba<br />
</form>
</div>
<div id="cam">
<form name="input" method="get">
<input type="radio" name="lap" value="sony" /> sony<br />
<input type="radio" name="lap" value="niccon" /> niccon<br />
<input type="radio" name="lap" value="fijjj" /> fijjj<br />
</form>
</div>
<div id="mob">
<form name="input" method="get">
<input type="radio" name="lap" value="lg" /> lg<br />
<input type="radio" name="lap" value="samsuze" /> samsuze<br />
<input type="radio" name="lap" value="samsuze" /> samsuze<br />
</form>
</div>
<div id="scarves">
<form name="input" method="get">
<input type="radio" name="lap" value="simple" /> simple<br />
<input type="radio" name="lap" value="cool" />cool <br />
<input type="radio" name="lap" value="curvi" /> carvi<br />
<input type="radio" name="lap" value="cafu" /> cafu<br />
</form>
</div>
<div id="bag">
<form>
<input type="radio" name="lap" value="Bag1" /> Bag1<br />
<input type="radio" name="lap" value="Bag2" />Bag2 <br />
<input type="radio" name="lap" value="Bag3" /> Bag3<br />
<input type="radio" name="lap" value="Bag4" /> Bag4<br />
</form>
</div>
<div id="glass">
<form name="input" method="get">
<input type="radio" name="lap" value="reben1" /> reben1<br />
<input type="radio" name="lap" value="reben2" />reben2 <br />
<input type="radio" name="lap" value="reben3" /> reben3<br />
<input type="radio" name="lap" value="reben4" /> reben4<br />
</form>
</div>
<div id="pants">
<form name="input" method="get">
<input type="radio" name="lap" value="levis" /> levis <br />
<input type="radio" name="lap" value="gazz" />gazz <br />
<input type="radio" name="lap" value="disel" /> disel <br />
<input type="radio" name="lap" value="killer" /> killer <br />
</form>
</div>
<div id="jw">
<form name="input" method="get">
<input type="radio" name="lap" value="gold" /> gold<br />
<input type="radio" name="lap" value="gold" />gold <br />
</form>
</div>
<div id="sand">
<form name="input" method="get">
<input type="radio" name="lap" value="parago" /> paragon <br />
<input type="radio" name="lap" value="paragon" /> paragon <br />
</form>
</div>
</div >
<center>
<div id="right" style="margin-left:40px;float:left;text-decoration:none;height:900px;width:900px;background-color:#FFFFFF">
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("seo",$con);
$sql="SELECT * FROM search";
$response=mysql_query($sql,$con);
echo "<table border='1'> ";
while($row=mysql_fetch_array($response))
{
echo "<tr><td>Product name:".$row['pname']."<br>Product Type:".$row['ptype']."<br>City Name:".$row['cname'];
echo "<td><img style='margin-left:50px;margin-right:50px;height:100px;width:100px' src='upload/".$row['pimg']."'/></tr>";
//echo $row['pimg'];
}
echo "</table>";
?>
</div></center>
i did this way. refer if you like....
我是这样做的。喜欢的话可以参考....
回答by Niko
The problem comes from document.getElementsByClassName and the return as an array.
问题来自 document.getElementsByClassName 和作为数组的返回。
$(".adminCheckbox").click(function(){
if(!$(".adminCheckbox").is(":checked")){
$(".deleteImageButton").hide(500);
}else{
$(".deleteImageButton").show();
}
});
See u!
再见！
回答by Wio
Since document.getElementsByClassName("adminCheckBox")returns an array, the checkedproperty will not be defined. Consider using document.getElementsByClassName("adminCheckBox")[0]or iterating through the array properly.
由于document.getElementsByClassName("adminCheckBox")返回一个数组，因此checked不会定义该属性。考虑document.getElementsByClassName("adminCheckBox")[0]正确使用或迭代数组。
