0

我试图只显示具有特定类的 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();
}
});
4

3 回答 3

2

试试这个代码：

$(document).ready(function(){
    $("div").hide();
    $("div").each(function(){
        if($(this).hasClass('<?php echo $tablename; ?>'))
           $(this).show();
    });
});
于 2013-07-10T22:03:44.547 回答
1

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

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

您只检查单个 div 是否具有该类。相反，您可以这样做：

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

哪个运算符直接在集合上。

于 2013-07-10T22:04:11.250 回答
1

您不需要ifor.hasClass()功能：

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

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

请注意，您的选择器中有一个点 for$(".div").show()和$(".div").hide()，这意味着您正在寻找具有class "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 列表仅包含具有指定类的那些并显示它们。

于 2013-07-10T22:10:02.753 回答