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

Posted 2023-05-07

【中文标题】JQuery .show() 方法在 .hide 之后不起作用

【英文标题】：JQuery .show() method not Working After .hide

【发布时间】：2014-09-10 13:36:20

【问题描述】：

我正在使用一个 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>

【参考方案1】：

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

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

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

); 

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

【讨论】：

有效的解决方案，当然，但是，为什么在 hide() 之后 show() 不能工作？？？这实际上是真正的问题，而不是寻求解决方法，而且由于我自己在 jQuery 中偶然发现了完全相同的问题，所以我确实对为什么不能在 hide() 之后使用 show() 的原因感兴趣 - 它对我来说，这似乎是 jQuery 中的一个非常大的错误？！？

【参考方案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

【参考方案3】：

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

【参考方案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>

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

【参考方案5】：

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

http://jsfiddle.net/c964v/

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

再见！