JQuery .show() 方法在 .hide 之后不起作用

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>

Answer 1

我强烈建议只使用.toggle() 来代替。就这样可以大大缩短代码。此外，如果需要，您可以通过将所有这些元素赋予相同的类来进一步优化它。

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

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

}); 

您还可以为切换设置一个数字值，以在隐藏和显示时制作动画，例如.toggle(500)

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 Demo

Answer 3

由于document.getElementsByClassName("adminCheckBox") 返回一个数组，checked 属性将不会被定义。考虑使用document.getElementsByClassName("adminCheckBox")[0] 或正确遍历数组。

Answer 4

<?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>

我就是这样做的。喜欢就参考吧……

Answer 5

问题来自于 document.getElementsByClassName 和作为数组返回。

http://jsfiddle.net/c964v/

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

再见！