Question

关于标题：我真的想不出一种更好的描述方式。

我有这个网页here，这是我使用的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>

正如您在page上看到的，点击任何带编号的链接都会立即显示＆amp;隐藏，表示上述两个代码都在运行，但第二个代码应该在用户再次单击文本/链接时运行。

Answer 1

添加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上的点击，这就是为什么您看到两个事件都会触发

Answer 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看起来更干净。

类在一个处理程序中添加并已激活另一个

2 个答案: