-1

jQueryは正常に機能しておらず、ロジックを完全に無視しています。

リンクをクリックすると、指定された説明が表示され、他のメニューがフェードアウトします。
同じリンクをもう一度クリックすると、その説明が非表示になり、他のリンクがフェードインします。

ただし、代わりにテキストを非表示にし、フェードインしません。
コンソールからコードを単独で実行し、段落の横の空白をクリックすると、問題なく機能します。

参考サイト

jQuery：

    $('a[class]').click(function(){
    var clas = $(this).attr('class');
        $('#'+clas.substring(0,2)).fadeTo('fast',1).removeClass('faded');
        $('p:not(#'+clas.substring(0,2)+')').fadeTo('fast',0.3);
        $('.ans:visible').toggle('slow');
        $('#'+clas.substring(0,2)+'a'+':hidden').fadeIn('slow');
        $('p:not(#'+clas.substring(0,2)+')').addClass('faded');
        return false;
    });
    $('p:not(p.faded)').click(function(){
        $('.ans:visible').toggle('slow');
        $('p[class="faded"]').fadeTo('fast',1).removeClass('faded');
    });

HTML：

    <p id="q1">1. <a class="q1">Nem látom a kedvenc karakterem, hozzá tudod adni?</a>
    <br>
    <span id="q1a" style="display:none;" class="ans">
        Persze. Írj egy e-mail-t a <a href="mailto:djdavid98+mlptoday@gmail.com?subject=MLP Today Karakterkérés" target="_blank">djdavid98@gmail.com</a> címre a karakter nevével.
        <br>
        <span style="color:red">OC-kat és fillyket NEM adok hozzá.</span>
    </span>
    </p>

    <p id="q2">2. <a class="q2">Hogyan tudok karaktert választani?</a>
    <br>
    <span id="q2a" style="display:none;" class="ans">
        Látogass el a <a href="../../img/?from=faq_hu">Karakterválasztás</a> oldalra, ahol kiválaszthatod a kedvenced.
        <br>
        Haználhatod továbbá a "<i>Véletlenszerű karakter</i>" linket is.
    </span>
    </p>

    <p id="q3">3. <a class="q3">Mi ennek az oldalnak a célja/alapötlete?</a>
    <br>
    <span id="q3a" style="display:none;" class="ans">
        Eredetileg a <a href="http://milyennapvanma.hu/" target="_blank">milyennapvanma.hu</a> weboldal pónisított változataként indult,
        <br>
        de azóta már nagy mértékben továbbfejlődött az oldal.
    </span>
    </p>
4

2 に答える 2

5

私はあなたの自信に感心しています。あなたのコードは機能しないので、問題はjQueryにあると思います。

あなたのコードでは、このステートメントは次のとおりです。

$('p:not(p.faded)').click(function(){

...その時点で"faded"クラスを持たない要素にクリックハンドラーをバインドします。最初はフェードされていないので、これがすべての要素になります。後でそのクラスが追加されていない要素にのみ適用する場合は、を介して割り当てる委任ハンドラーを使用する必要があります（または、1.7より古いjQueryを使用している場合、または途方もなく古いjQueryを使用している場合）。.on().delegate().live()

$(document).on('click', 'p:not(p.faded)'), function() {

ハンドラーをにバインドしないのが理想的です。document問題の段落の最も近い祖先を使用しますが、それほど多くのマークアップを表示していないので、その部分はあなたに任せます。

またreturn false;、アンカー要素のクリックハンドラーから、クリックイベントが段落まで伝播するのを防ぎます。

ただし、必要以上に全体を複雑にしていると思います。次のコードは仕事を成し遂げます：

var $questions = $('p'); // add class selectors here

$questions.click(function(){
   var $this = $(this),
       isOpen = $this.hasClass('open');

   $this.fadeTo('fast',1).toggleClass('open',!isOpen)
        .find('span.ans').toggle('slow');
   $questions.not(this).fadeTo('fast', isOpen ? 1 : 0.2)
                       .removeClass('open')
                       .find('span.ans').hide('slow');
});

つまり、いずれかの段落がクリックされたときに、その段落ですでに回答が開いているかどうかを確認します。次に、クリックしたものが表示されていることを確認し、その答えを切り替えます。次に、すべての兄弟段落を取得し、必要に応じてフェードインまたはフェードアウトして、回答を非表示にします。

「ここにクラスセレクターを追加する」というコメントを付けたところ、ドキュメント内のどの段落が質問であるかを識別するためのクラスを追加するとよいでしょう。

デモ： http： //jsfiddle.net/DxFDP/2

于 2012-11-09T22:42:16.403 に答える
0

コードにスタイルを適用するためにjQueryを使用することは決してありませんが、クラスを追加および削除するだけです...

それは厄介になり、時には、物事を複雑にする代わりに単純化することができます。

ここに簡単な例があります：http ：//jsbin.com/amiloc/1/

同じですが、<li>'sなし：http：//jsbin.com/amiloc/3/

「ボンネットの下」で何が起こっているのかがわかるように色を追加し、自分で判断できるようにします。

于 2012-11-09T22:55:31.163 に答える