0

これが私の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に適用されていた前のクラスをクリックすることです。クリアして、新しいクリックされたリンクにクラスを適用します。前にクリックしたリンクからクラスを削除できません。誰かがこれを手伝ってくれますか？

説明が十分に明確であったことを願っています。

4

2 に答える 2

0

あなたの質問から私が理解していることから、クラスを削除および追加するには、次のようなことを試すことができます。

$(".arrow").click(function(){
    $(".myClass").removeClass("myClass");
    $(this).addClass("myClass");
});
于 2013-01-13T20:55:45.497 に答える
-1

プラグインをアイテムのグループ全体に作用させてから、再適用する前にそれらすべてからクラスをクリアしてください。つまり、次のように構成します。

$.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()、クラスはそれらのうちの 1 つの要素にのみ.select_menu適用されます。

Codepen の例: http://codepen.io/anon/pen/hidFq

于 2013-01-13T21:02:21.167 に答える