Question

我试图只显示具有特定类的div并隐藏不具有特定类的div。在这个例子中，我试图显示类是“panel_profile”的div，并隐藏“wood”div。为什么不起作用？

HTML

<form>
<div class="panel_profile"> 
Name: <input>Data</input>
</div>

<div class="panel_profile"> 
Name: <input>Data</input>
</div>

<div class="wood">  
Name: <input>Data</input>
</div>
</form>

JQuery （我甚至尝试用正确的类替换PHP变量进行测试，但它不起作用）

$(document).ready(function(){
if ( $("div").hasClass("<?php echo $tablename; ?>") ) {
    $(".div").show();
} else {
    $(".div").hide();
}
});

Answer 1

试试这段代码：

$(document).ready(function(){
    $("div").hide();
    $("div").each(function(){
        if($(this).hasClass('<?php echo $tablename; ?>'))
           $(this).show();
    });
});

Answer 2

jquery选择器返回一个集合，但是当你运行

时

if ( $("div").hasClass("<?php echo $tablename; ?>") ) {

你只是检查一个div是否有那个类。相反，你可以这样做：

$("div.panel_profile").show();
$("div.wood").hide();

哪些运营商直接在集合上。

Answer 3

您不需要if或.hasClass()功能：

$(document).ready(function(){
   // hide all divs
   $("div").hide();
   // then show just the ones with the class
   $("div.<?php echo $tablename; ?>").show();
});

$("div.someclass")将选择具有类"someclass"的所有div元素。您可以将您的PHP代码与此结合使用：$("div.<?php echo $tablename; ?>")。

请注意，您在$(".div").show()和$(".div").hide()的选择器中有一个点，这意味着您正在寻找带有类 "div"的元素，而不是div元件。

if ( $("div").hasClass("<?php echo $tablename; ?>") )无法满足您的要求，因为如果任何元素具有该类，则.hasClass()会返回true。要将.hasClass()用于您的目的，您需要将其置于循环中。

更新：根据您的评论，您似乎只想将此处理应用于表单内的div。如果是这样，你可以这样做：

$(document).ready(function(){
   $("form").find("div").hide().filter(".<?php echo $tablename; ?>").show();
});

我做了一个稍微不同的方式只是为了变化，以显示jQuery如何让你将方法链接在一起。上面说的是选择表单元素（如果表单有一个，你可以通过id执行此操作，否则这将选择页面上的每个表单），然后在该表单中.find()所有的div并隐藏它们，然后.filter() div的列表只包含具有指定类的div并显示它们。

JQuery-如果表单内的div有class show，else hide

3 个答案: