Question

这是我的HTML：

<dl>
<dt>Options 1</dt>
<dd>Link 1</dd>
<dd>Link 2</dd>
<dd>Link 3</dd>
<dt>Option 2</dt>
<dd>Link 4</dd>
<dd>Link 5</dd>
<dd>Link 6</dd>
</dl>

我已经使用此菜单为我想要的效果创建了一个插件。这是我的插件：

(function($) {
    $.fn.Pointer = function() {
        var txt, y;
        txt = $(this);
        txt.on("click", function(event){
            y=event.pageY;
            y = y - 15;

            //animate pointer
            $('#pointer').animate({ 'top' : y + 'px'});
            //adding hover class to selected links
            txt.addClass("select_menu");
        });
    };
})( jQuery );

$("dd").each(function(){
    $(this).Pointer();
});

快速解释插件效果。我有一个带箭头的div指向您单击的链接。每次单击时，箭头都会滑动到单击的新链接（此滑块正常工作）。我也点击了链接更改类。这是我的第一个问题。当您单击链接1时，正在应用该类。我想要做的是单击链接2和应用于链接1的上一个类，我想清除并在新单击的链接上应用该类。我无法从之前点击的链接中删除该课程。有人可以帮我这个吗？

我希望解释清楚得足够清楚。

Answer 1

根据我对你的问题的理解，你可以尝试这样的东西来删除和添加类：

$(".arrow").click(function(){
    $(".myClass").removeClass("myClass");
    $(this).addClass("myClass");
});

Answer 2

让插件对整组项目执行操作，然后在重新应用之前从所有项目中清除该类。即结构如下：

$.fn.Pointer = function() {
  var $group = this;
  $group.on('click.Pointer', function() {
    var $link = $(this);

    $group.removeClass('select_menu')
    $link.addClass('select_menu')
  });
};

$('dd').Pointer();

您在.Pointer()中调用的任何元素组都只会将.select_menu类应用于其中的一个元素。

Codepen上的示例：http://codepen.io/anon/pen/hidFq

如何使用removeClass（）从所有类似的Item中删除类

2 个答案: