JQuery .hide() 方法后 .show() 方法无法工作

Question

我正在使用一个jQuery脚本，它允许一个复选框（类名为“adminCheckBox”）根据是否选中来显示或隐藏屏幕上的各种对象。

隐藏功能正常工作。然而，在元素被隐藏后，我再次点击复选框时，元素不会再次出现。有什么想法是为什么会这样吗？谢谢。

$(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();    

           }    

        }); 
        });

以下是所讨论的复选框的HTML代码。

        <br><div class="adminControls"><input type="checkbox" class="adminCheckbox"         checked="checked"><div class="checkBoxText">&nbsp;&nbsp;Admin Controls</div></div>

- user2938543

Answer 1

我强烈建议只使用 .toggle() 来完成这个功能。用这个方法可以大大简化代码。如果你想进一步优化，还可以给所有这些元素一个相同的类。

$(".adminCheckbox").click(function(){

    $(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle();

}); 

您还可以为toggle指定一个数字值，以便在隐藏和显示时执行动画，例如.toggle(500)

- CRABOLO

---

有效的解决方案，没错，但是，为什么在 hide() 后 show() 无法正常工作呢？这实际上才是真正的问题，而不是寻求解决方法，既然我自己在 jQuery 中也遇到了完全相同的问题，因此我确实对为什么不能在 hide() 后使用 show() 的原因很感兴趣 - 在我看来，这似乎是 jQuery 中一个非常严重的 bug？！ - QuestionOverflow

在某些情况下，我们仍然需要明确地显示或隐藏。 - mercury

Answer 2

使用.toggle()函数来隐藏和显示您的按钮。

并且使用.change()事件/处理程序代替.click()。

根据jQuery API:

当元素的值发生变化时，会向该元素发送change事件。此事件仅适用于<input>元素、<textarea>框和<select>元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，事件会立即触发，但对于其他元素类型，事件会延迟到元素失去焦点时才触发。

试一试：

$(document).ready(function () {
    $('.adminCheckbox').on('change', function () {
        $(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle(500);
    });
});

JSFiddle演示

- imbondbaby

Answer 3

<?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&nbsp&nbsp&nbsp</span>
<span  id="came">camera&nbsp&nbsp&nbsp</span>
<span  id="mobi">mobile&nbsp&nbsp&nbsp</span>
<span  id="scrv">Scarves&nbsp&nbsp&nbsp</span>
<span  id="bagg">Bag&nbsp&nbsp&nbsp</span>
<span  id="glasss">Glass&nbsp&nbsp&nbsp</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>

我是用这种方式实现的。如果你喜欢可以参考一下....

- sunil

Answer 4

问题出在 document.getElementsByClassName 和返回数组上。

http://jsfiddle.net/c964v/

$(".adminCheckbox").click(function(){
    if(!$(".adminCheckbox").is(":checked")){
        $(".deleteImageButton").hide(500);   
    }else{               
        $(".deleteImageButton").show();           
    }  
}); 

再见！

- Niko

Answer 5

由于document.getElementsByClassName("adminCheckBox")返回一个数组，因此checked属性将未被定义。请考虑使用document.getElementsByClassName("adminCheckBox")[0]或正确地迭代该数组。

- Wio