Question

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>

Answer 1

我很佩服你的自信：你的代码不起作用所以你认为问题出在jQuery上。

在您的代码中，此声明：

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

...将点击处理程序绑定到当时没有"faded"类的任何元素。这将是所有元素，因为最初没有褪色。如果您希望它仅应用于以后没有添加该类的元素，则需要使用通过.on()指定的委托处理程序（如果使用早于1.7的jQuery，则为.delegate()，或{{ 1}}如果使用一个荒谬的旧jQuery）：

.live()

理想情况下，您不会将处理程序绑定到$(document).on('click', 'p:not(p.faded)'), function() {，您将使用相关段落中最接近的anscestor，但由于您没有显示那么多标记，我会将该部分留给您。

另外，您在锚点元素上的点击处理程序中document，这会阻止点击事件传播到段落。

然而，我认为你让整件事情变得比你需要的更复杂。以下代码完成了工作：

return false;

也就是说，当点击任何段落时，弄清楚它是否已经打开了答案。然后确保单击的一个可见，并切换其答案。然后取出所有兄弟段落，并在适当的时候将它们淡入淡出或隐藏答案。

我把评论“在这里添加类选择器”放在哪里，最好添加一个类来识别文档中哪些段落是问题。

演示：http://jsfiddle.net/DxFDP/2

Answer 2

我从不使用jQuery将样式应用于代码，但是简单的添加和删除类......

它会变得混乱，有时候，我们可以简化而不是复杂的事情。

这是简单示例：http://jsbin.com/amiloc/1/

相同，但没有<li>的：http://jsbin.com/amiloc/3/

添加颜色让我们知道“引擎盖下”发生了什么，让你自己判断。

jQuery代码行为错误

2 个答案: