Question

Anyboby的帮助。为什么函数在第二次单击后添加类活动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/

第二次单击后功能工作

2 个答案: