JS 只使用一个 id 而忽略其他

Question

我添加了文本调整器 <a href="#" id="small" class="selected">A</a> 但它在最后一个 ID 上工作，请帮我修复它

<span class="category category--full">%s</span>
<h2 class="title title--full">%s</h2>
<div class="meta meta--full">
   <img class="meta__avatar" src="%s" alt="%s" />
   <span class="meta__author">%s</span>
   <span class="meta__date"><i class="fa fa-calendar-o"></i>%s</span>
   <span class="meta__reading-time"><i class="fa fa-clock-o"></i> %s</span>
   <span class="meta__misc meta__misc--seperator"></span>
   <span  class="meta__misc"><div class="fb-like" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div></span><br><br><br>
   <nav class="article-nav">
       <button><i class="fa fa-angle-left"></i> <span>Previous</span></button>
       <button><span>Next</span> <i class="fa fa-angle-right"></i></button>
   </nav>
</div>
<div id="wrapper">
  <div id="controls">
    <a href="#" id="small" class="selected">A</a>
    <a href="#" id="medium" class="">A</a>
    <a href="#" id="large" class="">A</a>
  </div>
%s
</div>


     <p>lorem <a href="%s" target="_blank">link</a> by <span>%s</span> </p>
       <center><p> <div class="fb-comments" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-width="450" data-numposts="5"></div></p> </center> </article>',$myrow["title"],$myrow["titled"],$myrow["pic"],$myrow["title"],$myrow["author"],$myrow["date"],$myrow["time"],$myrow["id"],$myrow["text"],$myrow["link"],$myrow["author_d"],$myrow["id"]); }


                 ?>

这里是 JS 代码：

$(document).ready(function(){

  $("#small").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"24px"});
    $("h2").animate({"font-size":"16px"});
    $("p").animate({"font-size":"12px", "line-height":"16px"});

  });

  $("#medium").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"36px"});
    $("h2").animate({"font-size":"24px"});
    $("p").animate({"font-size":"14px", "line-height":"20px"});

  });

  $("#large").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"48px"});
    $("h2").animate({"font-size":"35px"});
    $("p").animate({"font-size":"30px", "line-height":"40px"});

  });

  $( "a" ).click(function() {
   $("a").removeClass("selected");
  $(this).addClass("selected");

 });

});

Answer 1

你为什么不写如下，这是更可靠的代码：

$("a").click(function(e){
     e.preventDefault();
     $("a").removeClass("selected");
     $(this).addClass("selected");

     var type = $(this).attr('id');
     if(type=="small"){
         //Your code for small text
     }
     else if(type=="medium"){
         //Your code for medium text
     }
     else if(type=="large"){
         //Your code for large text
     }
});