jQuery / Ajax 向 LI 添加类不起作用

Question

jQuery / Ajax 向 LI 添加类不起作用。尝试将“开放”类添加到 LI，当商品添加到购物车时，它会打开我的“浮动购物车”区域。然而，'公开'课而已。惯于。申请。不知道为什么。

我也在使用 Bootstrap 框架和 jQuery。

我的代码是：

function ShoppingCartAddAJAX(formElement, productNumber) {
    formElement = $(formElement);
    $.ajax({
        type: "POST",
        url: "dmiajax.aspx?request=ShoppingCartAddAJAX",
        data: formElement.serialize(),
        dataType: "json",
        success: function (response) {
            if (response.Status == "WishListSuccess") {
                var url = "productslist.aspx?listName=" + response.listName + "&listType=" + response.listType;
                $(location).attr('href', url)
            } else if (response.Status == "Success") {
                if (response.Status == "Success") {
                    $.ajax({
                        type: "GET",
                        url: "dmiajax.aspx?request=FloatingCart&extra=" + rnd(),
                        dataType: "html",
                        success: function (response) {
                            $('#floating').addClass('open');
                            var floatingCart = $("ul.dropdown-menu.topcartopen");
                            if (floatingCart.length == 0) {
                                floatingCart = $('<ul class="dropdown-menu topcart open"></ul>').insertBefore("#floating-cart");
                                floatingCart.hoverIntent({
                                    over: function () {},
                                    timeout: 200,
                                    out: function () {
                                        $(this).stop(true, true).filter(":visible").hide("drop", {
                                            direction: "down"
                                        })
                                    }
                                })
                            }
                            floatingCart.html(response);
                            $("html, body").scrollTop(0);
                            var floatingCartTbody = floatingCart.find("tbody");
                            floatingCartTbody.find("tr").filter(":last").effect("highlight", {
                                color: "#B3B3B3"
                            }, 3500);
                            floatingCart.fadeIn()
                        }
                    });
                    if (response.CartItemCount) {
                        if (response.CartItemCount == "0") {
                            $("a.cart-tools-total").html("Shopping Cart<span class=\"label label-orange font14\">0</span> - $0.00")
                        } else {
                            $("a.cart-tools-total").html("Shopping Cart <span class=\"label label-orange font14\"> " + response.CartItemCount + " Item(s)  </span> - " + response.CartItemTotal + " <b class=\"caret\"></b>")
                        }
                    }
                    formElement.find("select option").attr("selected", false);
                    formElement.find("input:radio").attr("checked", false);
                    formElement.find("input:checkbox").attr("checked", false);
                    formElement.find("input:text").val("");
                    if (formElement.find(".personalization-toggle").length > 0) {
                        formElement.find(".person-options").hide()
                    }
                    if (formElement.find(".attribute-wrap.trait").length > 0) {
                        formElement.find(".stock-wrap").remove()
                    }
                } else if (response.Error) {
                    alert(response.Error)
                }
            }
        }
    })
}

我想将它添加到 LI 的行是：

$('#floating').addClass('open');

LI 是：

<li id="floating" class="dropdown hover carticon cart">

LI 的 ID 是浮动的，我想会在其中添加“open”类。没有。出于某种原因，只是没有发生。

而且，只是为了包含它，现场环境在这里：http://rsatestamls.kaliocommerce.com/

Answer 1

我怀疑您没有正确选择#floating 元素。有时元素仅通过 ID 是不可见的，您必须更具体地使用选择器。

我们需要查看渲染页面的确切来源以确定要放置什么，但请尝试这样做：

在页面上添加一个按钮，用于测试是否找到了正确的选择器：

<input id="mybutt" type="button" value="Tester Click">

接下来，添加此 javascript/jquery 代码，并一次一个地注释失败的测试选择器，并取消注释下一次尝试：

$('#mybutt').click(function() {
    var test = $("#floating");
    //var test = $("li #floating");
    //var test = $("ul li #floating");
    //var test = $("ul > li #floating");

    if ( test.length > 0 ) {
        alert('Found this: ' + test.attr('id') );
    }
});

---

一旦你确定你有正确的选择器，那么你的原始代码——使用正确的选择器——应该可以工作：

$('#the > correctSelector').addClass('open');

---

注意：上面的代码使用了 jQuery，所以确保你在页面中包含了 jQuery 库（通常在<head> 标签之间，像这样：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Answer 2

尝试将此添加到您的 ajax 请求中。它可能会出错：

$.ajax({
                    type: "GET",
                    url: "dmiajax.aspx?request=FloatingCart&extra=" + rnd(),
                    dataType: "html",
                    success: function (response) {
                        $('#floating').addClass('open');
                        var floatingCart = $("ul.dropdown-menu.topcartopen");
                        if (floatingCart.length == 0) {
                            floatingCart = $('<ul class="dropdown-menu topcart open"></ul>').insertBefore("#floating-cart");
                            floatingCart.hoverIntent({
                                over: function () {},
                                timeout: 200,
                                out: function () {
                                    $(this).stop(true, true).filter(":visible").hide("drop", {
                                        direction: "down"
                                    })
                                }
                            })
                        }
                        floatingCart.html(response);
                        $("html, body").scrollTop(0);
                        var floatingCartTbody = floatingCart.find("tbody");
                        floatingCartTbody.find("tr").filter(":last").effect("highlight", {
                            color: "#B3B3B3"
                        }, 3500);
                        floatingCart.fadeIn()
                    }
                    error: function(objAjax,state,exception){
                    console.log('exception: '+exception+'. State: '+state);
                    },
                });

然后，您将能够检查（在 Firebug 或其他应用程序上）您的请求是否正常工作。

Answer 3

尝试将其更改为：

 $('#floating').attr("class", "open");