使用多个班级

时间:2016-05-14 17:17:38

标签: javascript jquery html css

我想知道如何使用类更改文本字体我有多个不同类的文本我希望能够编辑所有文本而不添加另一个下拉我相信更改需要在脚本请帮助我



$("#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">
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

您应该对所有$100.00 Value使用相同的class来遵循相同的字体样式。

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

});

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

答案 1 :(得分:0)

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

但是应该避免使用*选择器。

答案 2 :(得分:0)

我不确定,但这种解决方法中的任何一种都适合您 方法1: 您可以在jquery选择器中添加多个类,并通过css方法更改字体。$(".boy,.boy2.boy3").css("font-family", $(this).val());

方法2:每次添加多个类都会很累,所以要么将所有div包装在另一个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());