複数のクラスを使用してフォントを変更する

Question

クラスを使用してテキストフォントを変更する方法を知りたいです。異なるクラスの複数のテキストがあります。変更を加える必要がないと考えて、すべてのテキストを編集できますスクリプトであることを私は

$("#fs").change(function() { 
 
    //alert($(this).val()); 
 
    $('.boy').css("font-family", $(this).val()); 
 

 
}); 
 

 
$("#size").change(function() { 
 
    $('.boy').css("font-size", $(this).val() + "px"); 
 
});

<div id="something" class="boy">hello world</div> 
 
<div id="something1" class="boy1">hello world</div> 
 
<div id="something2" class="boy2">hello world</div> 
 

 
<form method="post" action="<?php echo $PHP_SELF;?>"> 
 
    
 
    
 

 
    
 
    <select id="fs"> 
 
     <option value="Agency FB">Agency FB</option> 
 
     <option value="Algerian">Algerian</option> 
 
     <option value="AR Berkley">AR Berkley</option> 
 
     <option value="AR Blanca">AR Blanca</option> 
 
     <option value="AR Bonnie">AR Bonnie</option> 
 
     <option value="AR Carter">AR Carter</option> 
 
     
 
     
 
    </select> 
 
    
 
    <select id="size"> 
 
     <option value="8">8</option> 
 
     <option value="9">9</option> 
 
     <option value="10">10</option> 
 
     <option value="11">11</option> 
 
     <option value="18">18</option> 
 
     <option value="20">20</option> 
 
     <option value="22">22</option> 
 
     <option value="24">24</option> 
 

 
     
 
    </select> 
 

 

 

 

 
    
 
</form><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet" 
 
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
    <link rel="stylesheet" 
 
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<link rel="stylesheet" href="/resources/demos/style.css">

Answer 1

$(“*”).css(“font-size”,”15px”); 

しかし*セレクタは避けるべきで使用することを助けてください。

Answer 2

divのフォントスタイルは同じフォントを使用する場合は、同じclassを使用する必要があります。

$("#fs").change(function() { 
 
    //alert($(this).val()); 
 
    $('.boy').css("font-family", $(this).val()); 
 

 
}); 
 

 
$("#size").change(function() { 
 
    $('.boy').css("font-size", $(this).val() + "px"); 
 
});

<div id="something" class="boy">hello world</div> 
 
<div id="something1" class="boy">hello world</div> 
 
<div id="something2" class="boy">hello world</div> 
 

 
<form method="post" action="<?php echo $PHP_SELF;?>"> 
 

 
    <select id="fs"> 
 
    <option value="Agency FB">Agency FB</option> 
 
    <option value="Algerian">Algerian</option> 
 
    <option value="Arial">Arial</option> 
 
    <option value="AR Blanca">AR Blanca</option> 
 
    <option value="AR Bonnie">AR Bonnie</option> 
 
    <option value="AR Carter">AR Carter</option> 
 
    </select> 
 

 
    <select id="size"> 
 
    <option value="8">8</option> 
 
    <option value="9">9</option> 
 
    <option value="10">10</option> 
 
    <option value="11">11</option> 
 
    <option value="18">18</option> 
 
    <option value="20">20</option> 
 
    <option value="22">22</option> 
 
    <option value="24">24</option> 
 

 
    </select> 
 

 

 

 

 

 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<link rel="stylesheet" href="/resources/demos/style.css">

Answer 3

私はこの回避策のいずれかがあなたに 方法1を合わせます、わからないけど： あなたはjQueryのセレクタに複数のクラスを追加し、CSS法でフォントを変更することができます。 $(".boy,.boy2.boy3").css("font-family", $(this).val());

方法2：

を：どちらかあなたがこの

<div id="wrapper"> 
    <div id="something" class="boy">hello world</div> 
    <div id="something1" class="boy1">hello world</div> 
    <div id="something2" class="boy2">hello world</div> 
</div> 

のような別のdiv内のすべてのdivをラップし、あなたはこのようにそれの上にjqueryのセレクタを追加することができますので、複数のクラス毎の時間を追加して疲れるだろう

$("#wrapper >div").css("font-family", $(this).val());