Question

我试图在我的html页面中创建一个过滤器，以过滤由javascript函数生成的内容。我有一个div＆＃34; divname＆＃34;这是由mySql数据库从javascript函数中调用的php代码加载的内容。我使用bootstrap框架，从javascript我为每个必须显示的数据库元素创建一个bootstrap列。我想过滤此内容，我希望根据复选框过滤器显示和消失某些列。我尝试使用.js函数＆＃39; setAttribute＆＃39;要为列设置ID，我会按此id内容过滤此列。

e.g。 column.setAttribute（＆＃39; id＆＃39;，＆＃39; chair＆＃39;） - ＆gt;我希望复选框过滤器显示div id中包含的所有椅子=＆＃34;家具＆＃34;

我试图这样做，但我无法告诉过滤器＆＃34;家具＆＃34;里面有div，过滤器应该在这个div里面看，并显示他的元素可见或不可见。

感谢您的帮助！

编辑：

过滤器调用我的js函数

$(function(){
    $("#filters a").click(function() {
        $("#furniture").find("." + this.id).toggle();   
    });
  });

我的过滤器：

<div id="filters">    
    <a href="#" id="chair">Filter chair</a>
</div>

我的html页面：

<!DOCTYPE html>

<html>
    <head>
        <title>Furnitures</title>

         <link rel="shortcut icon" href="images/fav.ico" type="image/x-icon" />

        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Bootstrap CSS -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
        <link href="includes/css/bootstrap-social.css" rel="stylesheet">
        <link rel="stylesheet" href="includes/font-awesome/css/font-awesome.min.css">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="includes/css/styles.css">
        <script src="includes/js/modernizr-2.6.2.min.js"></script>

    </head>
    <body>

        <div id="navbar"></div>

            <div class="row top-buffer-from-navbar">
                 <div id="furniture"></div>
            </div>

    </div>

    <footer id="footer"></footer>

    <script src="http://code.jquery.com/jquery.js"></script>

    <script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>

    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!-- Custom JS -->
    <script src="includes/js/script.js"></script>
    <script src="includes/js/loadFurnitures.js"></script>
    <script src="includes/js/filter.js"></script>
    <script>
        $(function(){
            $("#footer").load("footer.html");
        });
    </script>
    <script>
        $(function(){
            $("#navbar").load("navbar.html");
        });
    </script>

    </body>
</html>

这是我的装载家具js

function ready(){

    var idprodotti=1;

    $.ajax({
        method: "POST",
        crossDomain: true,
        url: "includes/php/getFurniture.php",
        data: {furniture:idprodotti},
        success: function(response) {
            var furniture=JSON.parse(response);
            var i=0;   

            var myParam = location.search.split('category=')[1];

            var container = document.getElementById("furniture");

            var panel = document.createElement("div");
            panel.setAttribute("class", "panel");
            var panelHeading = document.createElement("div");
            panelHeading.setAttribute("class", "panel-heading");
            var panelTitle = document.createElement("h4");
            var panelContenent = document.createElement("div");
            panelContenent.setAttribute("class", "col-sm-12 feature");

            panelTitle.appendChild(document.createTextNode("furniture"));

            panelHeading.appendChild(panelTitle);
            panel.appendChild(panelHeading);

            var row = document.createElement("div");
            row.setAttribute("class", "row");


            for(i=0;i<furniture.length;i++) {


                    var urlFurniture = "furniture.html?furniture=" +furniture[i].id;

                    var img = document.createElement("img");  
                    var urlImmagine = "images/furniture/" + furniture[i].immagine;
                    img.setAttribute('src', urlImmagine);
                    img.setAttribute('class', 'img-responsive');

                    var name = document.createElement("h4");
                    var nameTemp = document.createTextNode(furniture[i].nome);
                    name.appendChild(nameTemp);

                    var button = document.createElement("a");
                    button.setAttribute('class', 'btn btn-smsll btn-default');
                    button.setAttribute("href", urlProdotto);
                    var buttonLabel = document.createTextNode("Scopri");
                    button.appendChild(buttonLabel);

                    var price = document.createElement("h4");
                    var priceTemp = document.createTextNode(furniture[i].prezzo+ "\u20AC");
                    price.appendChild(priceTemp);

                    var showedFurniture = document.createElement("div");
                    showedFurniture.setAttribute("class", "col-sm-4 feature");

                    showedFurniture.setAttribute("type", furniture[i].category);

                    var showedFurniturePanel = document.createElement("div");
                    showedFurniturePanel.setAttribute("class", "panel text-center");

                    var showedButton = document.createElement("div");
                    showedButton.setAttribute("class", "row");
                    showedButton.appendChild(button);


                    showedFurniturePanel.appendChild(img);
                    showedFurniturePanel.appendChild(name);
                    showedFurniturePanel.appendChild(price);
                    showedFurniturePanel.appendChild(showedButton);

                    showedFurniture.appendChild(showedFurniturePanel);

                    panelContenent.appendChild(showedFurniture);  


                row.appendChild(panelContenent);
                panel.appendChild(row);
                container.appendChild(panel);
            }   
        },
        error: function(request,error) 
        {
            console.log("Error");
        }
    });

}
$(document).ready(ready);

我想按照他的类别过滤每个showFurniture＆＃34; chair＆＃34;或＆＃34;表＆＃34;

Answer 1

有点难以理解这个问题，但我猜它是一个包含不同类型项目的列表，并且你想要进行过滤。

id应该是唯一的，使用其他名称来设置属性，比如类型或任何你喜欢的类型，类型可以是“desk”或“chair”。然后，由于您在不同的项目中具有这些不同的类型属性，您可以编写js函数以轻松选择和过滤项目。
如果你只想为多个元素使用相同的id，jquery $（“[id = someid]”）可以做到这一点。

过滤另一个div

1 个答案: