4

ID 、、、およびの4つのdivが#registrierenあり、このjQueryスクリプトは次のとおりです。#story#faq#mediadaten

var menu='';
$(function()
{
    $('#registrieren').attr('id', 'menuAktiv');
    menu='registrieren';

    $('#registrieren').click(function()
    {
        if(menu != 'registrieren')
        {
            $('#menuAktiv').attr('id', menu);
            $('#registrieren').attr('id', 'menuAktiv');
            menu='registrieren';
        }
        alert(menu);
    });
    $('#story').click(function()
    {
    if(menu!='story')
    {
        $('#menuAktiv').attr('id', menu);
        $('#story').attr('id', 'menuAktiv');
        menu='story';
        }
        alert(menu);
    });
    $('#faq').click(function()
    {
        if(menu != 'faq')
        {
            $('#menuAktiv').attr('id', menu);
            $('#faq').attr('id', 'menuAktiv');
            menu='faq';
        }
        alert(menu);
    });
    $('#mediadaten').click(function()
    {
        if(menu != 'mediadaten')
        {
            $('#menuAktiv').attr('id', menu);
            $('#mediadaten').attr('id', 'menuAktiv');
            menu='mediadaten';
        }
        alert(menu);
    });
});

今、私がをクリックしているとき#story、#faqまたは#mediadaten私はに#registrieren戻るのIDを変更することができません#menuAktiv。

最初にそれらの要素の別の要素IDを変更するときにも、同じ問題が発生します。解決策はありますか？

4

4 に答える 4

3

id の代わりにクラスを使用して、アクティブな div を示す必要があります。

http://api.jquery.com/addClass

http://api.jquery.com/toggleClass

http://api.jquery.com/removeClass

次に、 $('.classname') を使用して選択します。

于 2012-09-13T20:15:37.693 に答える
3

menuAktivIDを変更してクラスを使用するのではなく。

$(function()
{
    $('#registrieren').addClass('menuAktiv');

    // attach a click to all items
    $('#registrieren,#story,#faq,#mediadaten').click(function()
    {
        if ($(this).is(".menuAktiv"))
            return false;

        // remove current active menu class
        $('.menuAktiv').removeClass('menuAktiv');

        // set active class to clicked item
        $(this).addClass('menuAktiv');
    });
});​

あなたのマークアップを見れば、これはおそらくさらに最適化される可能性があります

作業例: http://jsfiddle.net/hunter/XMu9n/

于 2012-09-13T20:16:36.830 に答える
3

あなたのコードから、何かをアクティブにしようとしているようですid=menuAktiv。

次に、これを行うには、 を使用できますclass=menuAktiv。

コード：

$('#registrieren').addClass('menuAktiv'); // initially set active 
                                               // class to registrieren

次に、いずれかをクリックしてそのクラスを変更します。例えば：

$('#registrieren, #store, #faq, #mediadaten').click( function() {
  $('.menuAktiv').removeClass('menuAktiv'); // remove active class
  $(this).addClass('menuAktiv'); // add active class to clicked item
});

もっと

このための汎用関数を作成するとよいでしょう。例えば：

function changeActiveElement(el) {
   $('.menuAktiv').removeClass('menuAktiv'); // remove active class
   $(el).addClass('menuAktiv'); // add active class to clicked item
}

そして、以下のようにクリックハンドラからこの関数を呼び出します:

$('#registrieren, #store, #faq, #mediadaten').click( function() {
   changeActiveElement(this);
});
于 2012-09-13T20:17:48.083 に答える
-1

問題は最初の数行にあります。

 $('#registrieren').attr('id', 'menuAktiv');
menu='registrieren';

$('#registrieren').click(function()
{
    if(menu != 'registrieren')
    {
        $('#menuAktiv').attr('id', menu);
        $('#registrieren').attr('id', 'menuAktiv');
        menu='registrieren';
    }
    alert(menu);
});

3 行目の $('#registrieren') は何も指していません。$('#registrieren') は、dom で id="registrieren" を持つ要素を検索します。その要素の ID を別のものに変更したので、$('#registrieren') は何も与えません。

それを機能させるには (ただし、コードがしようとしていることを実行するための最善の方法であるとは限りません)、今説明したことが実際に起こっていることを証明するには、その要素への参照を変数 (pre -変化する）。その後、要素をターゲットにしたいときはいつでもそれを使用します。

var registrieren = $('#registrieren');

registrieren.attr('id', 'menuAktiv');

registrieren.click(function() {
//etc
});

「状態を変更する」ためにIDの代わりにクラスを使用することに関しては、はい、おそらくはるかに良い考えです-以前のIDへの参照を保存し続ける必要はありません。

于 2012-09-13T20:19:47.630 に答える