jquery - .toggleClass 在类之间切换但具有多个 ID

Question

正如您从下面的代码中看到的，我试图在单击“note”时弹出“revealFootNote”。这很好用，但我有 10 个脚注，当我点击其中任何一个时，它们都会弹出。每个脚注都有一个唯一的 ID，即“一”、“二”……“十”，我只需要在单击该特定类时弹出相关的脚注。如果我将 .note 替换为 #one，它仍然有效，但它会为单击的任何类弹出 #one。

$(document).ready(function(){                                               
    $(".note").click(function() {;
        $(".footNote").toggleClass("revealFootNote");
    });
    $(".footNote").click(function() {;
        $(this).toggleClass("revealFootNote");
    });
});

帮助!我学习 jQuery 已经 2 天了。

谢谢， 塔里埃森

所以，在你们给我的所有帮助之后的最终结果是:

$(".note, .revealFootNote").click(function() {
    if ($(this).hasClass('note')) {
        $('#'+$(this).data('target')).toggleClass("revealFootNote");
    } else {
        $(this).hide();
    }
});
    $(".footNote").click(function() {;
        $(this).toggleClass("revealFootNote");
});

Answer 1

HTML

<ul>
    <li>Running speed<span class="note" data-target="nine">9</span></li>
    <li>Ki<span class="note" data-target="ten">10</span></li>
    <li>ESP<span class="note" data-target="eleven">11</span></li> 
</ul> 

<aside class="footNote" id="nine"> The average human can run 7.5 miles per hour. </aside> 
<aside class="footNote" id="ten"> Ki and ESP points can be further modified with the use of skills or alchemical substances. </aside>
<aside class="footNote" id="eleven"> Footnote Eleven </aside>

jQuery

$(document).ready(function($) {
    $(".note, .footNote").click(function() {
        if ($(this).hasClass('note')) {
            $('#'+$(this).data('target')).show();
        } else {
            $(this).hide();
        }
    });
});