Question

从下面的代码中我可以看到，当点击“note”时，我试图弹出“revealFootNote”。这很好，但我有10英尺的音符，当我点击其中任何一个时，它们都弹出。每个脚注都有一个唯一的ID“one”，“two”......“十”我只需要点击特定课程时弹出的相关脚注。如果我用#one替换.note它仍然可以工作，但是对于任何点击的类，它会弹出#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();
   }
});

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

2 个答案: