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">

李的身份证是浮动的，我认为'加上'开放'的等级。不。出于某种原因，只是没有发生。

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

Answer 1

尝试将其更改为：

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

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元素。有时，只有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>

jQuery / Ajax将类添加到LI无法正常工作

3 个答案: