我在我的网站上使用了词汇表,它使用了一些显示/隐藏功能和.removeClass属性。
$(document).ready(function() {
$("#glossary-container li").click(function() {
$(".glossary-content > div").hide();
var id = $(this).attr("id").replace('-link', '');
$('#' + id).show();
$(".glossaryUL li").each(function() {
$(this).click(function() {
$(".glossaryUL li").removeClass("selected");
$(this).addClass("selected");
elementClick = $(this).attr("id");
});
});
});
$('.coolbox').hide();
$('.clicker').click(function(event){
event.preventDefault();
$($(this).attr('href')).toggle(300);
});
});
在页面加载时,列表项字母“A”UL lass“.glossaryUL”通过内联样式设置为“已选择”。
<li id="a-link" class="selected">A</li>
当您单击另一个字母时,将显示“.glossary-content”类中的术语,但.removeClass属性不会从字母“A”中删除该类。
但是,如果您再单击另一个字母(页面加载后第二次单击),.removeClass属性将起作用并删除该类并将其应用于正确的字母...
我无法弄清楚为什么会这样做。
非常感谢任何帮助。
答案 0 :(得分:2)
您不需要将点击事件分配包装到each
,jQuery已经为与该选择器匹配的每个元素分配click
事件(因为您使用类作为选择器)。我怀疑你有重复的点击事件冲突。试试这个:
$(".glossaryUL li").click(function() {
$(".glossaryUL li").removeClass("selected");
$(this).addClass("selected");
elementClick = $(this).attr("id");
});
});