第二次单击后function工作

Anyboby的帮助。 为什么函数add class active this.parents(".block-parent").find(".periods[data-period="+typelink+"]").addClass('active')在第二次点击后工作？ 首次点击后需要完成！ 链接不正确的例子http://jsfiddle.net/kngU8/

 Page.contentSort = function() { var $eachblocks = $(".top10_month .periods"); var $blockhead = $(".block-head__link"); $blockhead.on("click", function(e){ var $this = $(this); var typelink = $(".block-head__link.active").attr("data-date"); e.preventDefault(); $this.parents("ul").find("a").removeClass("active"); this.className += " active"; $this.parents(".block-parent").find(".periods").removeClass('active'); $this.parents(".block-parent").find(".periods[data-period="+typelink+"]").addClass('active'); }); }; 

Answer 1

因为在第一次单击时，您初始化代码，以便它在第二次单击时工作！ 常用逻辑使用$（function（））; 像这样

 $(function(){ var $eachblocks = $(".top10_month .periods"); var $blockhead = $(".block-head__link"); $blockhead.on("click", function(e){ var $this = $(this); var typelink = $(".block-head__link.active").attr("data-date"); e.preventDefault(); $this.parents("ul").find("a").removeClass("active"); this.className += " active"; $this.parents(".block-parent").find(".periods").removeClass('active'); $this.parents(".block-parent").find(".periods[data-period="+typelink+"]").addClass('active'); }); }); 

试试这个应该工作

Answer 2

这是因为你正在使用它

 var typelink = $(".block-head__link.active").attr("data-date") 

找到你刚刚点击的链接，你还没有处理更改类，所以它得到了你给类活跃的前一个元素。 以下将返回所单击元素的正确数据日期值，而不是您认为可能是类名称的元素。

 var typelink = $(this).data("date"); // var typelink = $(this).attr("data-date"); // this isn't how data is used 

http://jsfiddle.net/kngU8/7/