在一个处理程序中添加类并且已经激活另一个类 [英] Class added in one handler and already activating another one

问题描述

我有这个网页 here ，这是我使用的jQuery代码：

  $（'a [class]'）。click（function（）{
 var clas = $（this）.attr（'class'）; 
 
 $（'＃'+ clas.substring（0,2））。fadeTo（'fast'，1）.removeClass（'faded'）; 
 $（'p：not（＃'+ （'''''）'）。fadeTo（'fast'，0.3）; 
 $（'。ans：visible'）。toggle（'slow'）; 
 $（' '＃'+ clas.substring（0,2）+'a'+'：hidden'）。fadeIn（'slow'）; 
 $（'p：not（＃'+ clas.substring（0， 2）+'）'）。addClass（'faded'）//类添加
}）; 
 $（'p：not（p.faded）'）。click（function（）{//在它触发这个
 $（'p.faded'）后立即返回fadeTo（'fast'， 1）.removeClass（'faded'）; 
 $（'。ans：visible'）。toggle（'slow'）; 
}）; 
  

HTML

 < p id =q1> 1。 < a class =q1> Nemlátoma kedvenc karakterem，hozzátudod adni？< / a> 
< br> 
< span id =q1astyle =display：none;类= ANS > 
 Persze。 Írjegy e-mail-t a< a href =mailto：[e-mail]？subject = MLP TodayKarakterkéréstarget =_ blank> [e-mail]< / a> címrea karakternevével。 
< br> 
< span style =color：red> OC-kat& fillyket NEM adokhozzá。< / span> 
< / span> 
< / p> 
 
< p id =q2> 2。 < a class =q2> Hogyan tudok karaktertválasztani？< / a> 
< br> 
< span id =q2astyle =display：none;类= ANS > 
Látogassel a< a href =../../ img /？from = faq_hu>Karakterválasztás< / a> oldalra，ahol。 
< br> 
Haználhatodtovábbáa< i>Véletlenszer？karakter< / i>链接是。 
< / span> 
< / p> 
 
< p id =q3> 3。 < a class =q3> Mi ennek az oldalnak acélja/alapötlete？< / a> 
< br> 
< span id =q3astyle =display：none;类= ANS > 
 Eredetileg a< a href =http://milyennapvanma.hu/target =_ blank> milyennapvanma.hu< / a> weboldalpónisítottváltozatakéntindult，
< br> 
 deazótamárnagymértékbentovábbfejlődöttaz oldal。 
< / span> 
< / p> 
  

正如您在页面，点击任何编号的链接会立即显示&隐藏，表明上面的两个代码都在运行，但只有当用户再次单击文本/链接时才会运行第二个代码。 解决方案

p>添加stopPropagation（）这里的链接是小提琴 http://jsfiddle.net/GSwDN/

  $（'a [class]'）。click（function（e）{
 e.stopPropagation（）; 
 var clas = $（this）.attr（'class'）; 
 
 $（'＃'+ clas.substring（0,2））。fadeTo（'fast'，1）。 （''''）; 
 $（'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'）//类添加
}）; 
 $（'p：not（p.faded）'）。click（function（）{//在它触发这个
 $（'p.faded'）后立即返回fadeTo（'fast'， 1）.removeClass（'faded'）; 
 $（'。ans：visible'）。toggle（'slow'）; 
}）; 
  

您的代码可以更好/清理，但是当您点击锚点时，会冒泡到父级p激活点击p，这就是为什么你看到两个事件触发

About the title: I really could not think of a beter way to describe this.

I have this webpage here, and this is the jQuery code I use:

$('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:[e-mail]?subject=MLP Today Karakterkérés" target="_blank">[e-mail]</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>

As you can see on the page, clicking on any of the numbered links will instantly show & hide, indicating that both of the above code runs, but the second only should run when the user clicks the text/link again.

解决方案

Add stopPropagation() this link here is fiddle 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');
});

your code can be better/cleaned up but when you click the anchor, it bubbles up to the parent p which activates the click on the p and that's why you see both events firing

这篇关于在一个处理程序中添加类并且已经激活另一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！