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>

正如您在页面上看到的那样，单击任何带编号的链接都会立即显示和隐藏，这表明上述两个代码都运行了，但第二个代码只应在用户再次单击文本/链接时运行。

4

2 回答 2

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 回答
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 回答