1

タイトルについて：私はこれを説明するためのより良い方法を本当に考えることができませんでした。

私はここにこのウェブページを持っています、そしてこれは私が使用する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') //the class gets added
});
$('p:not(p.faded)').click(function(){ //right after it fires this
    $('p.faded').fadeTo('fast',1).removeClass('faded');
    $('.ans:visible').toggle('slow');
});

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.
        <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>

ページでわかるように、番号の付いたリンクのいずれかをクリックすると、すぐに表示と非表示が表示され、上記の両方のコードが実行されることを示しますが、2番目のコードは、ユーザーがテキスト/リンクをもう一度クリックしたときにのみ実行されます。

4

2 に答える 2

2

まばたき効果については、CSS3機能を使用することをお勧めします。

@-webkit-keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
.animate {
-webkit-animation-direction: normal;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;   
}

次に、このクラスをonclickイベント内のボタンに追加します。

$('a[class]').click(function(e){
  $(this).addClass('animate')  
}

これにより時間を節約できますが、JSの見た目もすっきりします。

于 2012-11-09T18:35:24.860 に答える
2

stopPropagation() を追加します。このリンクはフィドルですhttp://jsfiddle.net/GSwDN/

$('a[class]').click(function(e){
    e.stopPropagation();
    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') //the class gets added
});
$('p:not(p.faded)').click(function(){ //right after it fires this
    $('p.faded').fadeTo('fast',1).removeClass('faded');
    $('.ans:visible').toggle('slow');
});

コードは改善/クリーンアップできますが、アンカーをクリックすると、親 p にバブルアップし、p のクリックがアクティブになるため、両方のイベントが発生します。

于 2012-11-09T18:19:35.643 に答える