Question

我正在使用静态json文件。我正在使用jquery将我的文件加载到我的商店。

一切都很好。

在我的商店旁边，我有一个类别菜单，我可以在其中过滤商店商品。

因为我的商店是动态生成的商品，所以我似乎无法用jquery选择它们。这是ajax请求：

<script>
            $(function () {
                var actionUrl = '@Url.Action("Items", "Home")';
                $.getJSON(actionUrl, displayData);

                function displayData(response) {
                    if (response != null) {
                        for (var i = 0; i < response.length; i++) {
                            $("#store").append("<div class='storeItem' data-price=" + response[i].PriceScale + " data-category=" + response[i].Cat + "> <img src='#" + response[i].Cat + "' class='itemImage' alt='" + response[i].Title + "'/><span class='itemTitle'>" + response[i].Title + "</span><span class='itemDesc'><p>" + response[i].Desc + "</p></span><span class='itemPrice'>"+ response[i].Price +"</span><a href='#' class='add2cart'>ADD TO CART</a>")
                        }
                    }
                    else {
                        $("#store").append("<h5>There was a problem loading the store content.</h5>");
                    }
                }
            });
        </script>

以下是我试过的代码：

 <script>
        $(function () {
            $( "nav#catagories ul li input").on("click", function () {
                var a = $(this).prop("checked");
                var b = $(this).attr("id");
                if (a == true) {
                    $("div.storeItem").hide();
                    $(".storeItem").data("category", b).show();
                }
            });
        });
    </script>

我也试过了：

<script>
        $(function () {
            $(document).on("click","nav#catagories ul li input", function () {
                var a = $(this).prop("checked");
                var b = $(this).attr("id");
                if (a == true) {
                    $("div.storeItem").hide();
                    $(".storeItem").data("category", b).show();
                }
            });
        });
    </script>

在这两种情况下，脚本都会运行，直到div.storeItem隐藏。

以下是输出的HTML：

<div class="storeItem" data-price="med" data-category="apparel"> 
   <img src="#apparel" class="itemImage" alt="Shirt">
          <span class="itemTitle">Shirt</span>
          <span class="itemDesc">
                   <p>A Beatiful Shirt</p>
          </span>
          <span class="itemPrice">23.45</span>
          <a href="#" class="add2cart">ADD TO CART</a>
   </div>

Answer 1

也许你的问题不需要对动态生成的项目做任何事情。这里$(".storeItem").data("category", b).show();您要使用b中存储的值替换类别值，而您似乎要选择类别等于b的那些。

也许这会起作用或至少给你方向：

   $(function () {
        $(document).on("click", "nav#catagories ul li input", function () {
            var checked = $(this).prop("checked");
            var category = $(this).attr("id");
            if (checked) {
                $(".storeItem").hide()
                               .filter(function () {
                    return $(this).data("category") === category;
                }).show();
            }
        });
    });

选择器忽略Ajax / Jquery加载的内容

1 个答案: