jQuery / Ajax 向 LI 添加类不起作用
Posted
技术标签:
【中文标题】jQuery / Ajax 向 LI 添加类不起作用【英文标题】：jQuery / Ajax Add Class to an LI not working 【发布时间】：2013-10-01 11:14:32 【问题描述】：。尝试将“开放”类添加到 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/
【问题讨论】：
是否有任何错误/警告？ 我认为你的函数做了太多的事情，应该分成更小的块。 您添加到购物车的所有链接似乎都在触发页面重新加载，而不是点击 ajax 功能。您在哪里调用 ShoppingCartAddAJAX？ 【参考方案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>
【讨论】：
我不明白。我怎么能比选择 ID 更具体？ @user1879703 我想不出办法来解释它。你是对的：#idname 应该可以在 DOM 中直接访问，但有时它不是——你必须更具体一点。尝试向父元素添加一个 ID，看看我建议的 TEST CODE 是否可以检测到 它们。 这是简单的代码，是吗？您可以轻松地运行一些测试，看看我是否走在正确的轨道上。 因为您可以访问源代码而我没有，所以我必须要求您为我尝试这些东西，如果它们不正确，请报告没救然后我们想出别的办法——但这是我偶然发现的好几次。 我正在尝试代码，但控制台一直说有意外；和意想不到的，有点奇怪。代码本身看起来非常简单。 啊，test.attr('id');行需要一个结尾）无论如何，都试过了，没有一个奏效。 抱歉缺少括号。您可以发布渲染页面的标记（来源？）吗？您是否尝试将 ID attrs 添加到某些父元素并尝试使用 them 进行相同的测试？你能告诉我们完整的 DOM 遍历层次结构返回到 #floating<li> 元素的文档对象吗？【参考方案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 或其他应用程序上）您的请求是否正常工作。
【讨论】：
【参考方案3】：尝试将其更改为：
$('#floating').attr("class", "open");
【讨论】：
刚试过，在我提供的链接上。不添加类。 :( 尝试在这一行之前添加一个警告，如 alert($('#floating').html()) 看看会发生什么？以上是关于jQuery / Ajax 向 LI 添加类不起作用的主要内容，如果未能解决你的问题，请参考以下文章