更改使用多個類的字體

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像這樣

<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> 

另一格內，你可以像這樣在它添加jQuery選擇每次加多個類：

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