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();
        }
    });
});

Answer 2

你可以试试这个，我是在你看到你的 html 之后做的：http://jsfiddle.net/7Q23b/

$('ul li').click(function () {
   if ($('.note',this).text() == '9') {
      $('#nine').toggle();
   } else if ($('.note',this).text() == '10') {
      $('#ten').toggle();
   }
});