Question

目前希望采用OOP样式方法javascript，因为我是一名初级程序员，希望将我的javascript技能提升一个档次。我的代码似乎根本不起作用，我现在尝试了几个小时的不同解决方案。

我的目标 我想完成在页面上创建点击功能的操作。用户点击链接并将CSS类.active添加到链接的位置（当然，在点击时不会将类添加到其他链接）。最后，当一个suer点击同一个链接时（类的活动链接）再次让类自行删除并返回其正常状态。

感谢您的帮助！

的Javascript

var activeState = $(".category-tree-with-article .article-list > li > a, .content-left-bottom li a, .content-right-bottom li a");


          function clickState () {
              this.initEvent();

                 clickState.prototype = {
                     initEvent: function() {

                activeState.on('click', function (event) {
                    event.preventDefault();
                    var el = $(this);

                    // For class changes
                    activeState.toggleClass('active');
                    el.addClass('active');


                    });
                }

            }//prototype inherit
          } //end function

          clickState();

CSS

a.active {
color:red;
font-family:"Prime";
}

Answer 1

我说你应该停止使用你的＆＃34; OOP＆＃34;风格编码

var activeState = $(".category-tree-with-article .article-list > li > a, .content-left-bottom li a, .content-right-bottom li a");

activeState.on('click', function (event) {
    event.preventDefault();

    activeState.not(this).removeClass('active');
    $(this).toggleClass('active');
});

使用jquery更改链接样式和属性

1 个答案: