3

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/

4

3 に答える 3

0

これを 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 または他のアプリで）確認できます。

于 2013-09-25T18:24:34.757 に答える
0

#floating 要素を正しく選択していないと思われます。ID だけでは要素が表示されない場合があり、セレクターをもう少し具体的にする必要があります。

何を配置するかを確認するには、レンダリングされたページのソースを正確に確認する必要がありますが、次のようにしてみてください。

正しいセレクターが見つかったかどうかをテストするために使用できるボタンをページに追加します。

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

次に、この javascript/jquery コードを追加し、一度に 1 つずつ、失敗したテスト セレクターをコメントし、次の試みのコメントを外します。

$('#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>
于 2013-09-25T18:24:44.927 に答える