Question

我一直在为大学作业创建一个网站，我希望包含的功能是允许用户为p和pre标签选择字体大小，字体系列，填充和对齐的预设。到目前为止，我可以通过一个小的下拉菜单创建一组预设选项，但我需要四个不同的选择菜单来改变1/4方面，而不是一个菜单来改变所有4。

虽然它不起作用，但已经制作了字体系列的菜单。

以下是部分代码：

    <head>
    <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0
    /jquery.min.js"></SCRIPT>

所以这是在头脑中但剩下的就在这里

<center>
<select runat="server" id="select">
<option value="1" style="background-color: white;">Standard</option>
<option value="2" style="background-color: white;">Large</option>
<option value="3" style="background-color: white;">Small</option>
</select>
</center>
<script>
$('#select').change(function(){

 if($(this).val() == '1'){

 $("p, pre").css('font-size', '18px');
  } 

 if($(this).val() == '2'){


 $("p, pre").css('font-size', '26px');
  } 

    if($(this).val() == '3'){   

 $("p, pre").css('font-size', '10px');
  }

  });
 </script>
<br/>
<center>
<select runat="server" id="select">
<option value="1" style="background-color: white;">Serif</option>
<option value="2" style="background-color: white;">Sans Serif</option>
</select>
</center>
<script>
$('#select').change(function(){

  if($(this).val() == '1'){

    $("p, pre").css('font-family', 'Georgia, serif');
  } 
  if($(this).val() == '2'){

    $("p, pre").css('font-family', 'Verdana, Geneva, sans-serif');
  } 
</script>

所以我多年来一直在玩它，但没有运气。我已经尝试将两者放在一起，我尝试将1,2,3改为不同的数字，但没有...

我希望这种方法得到改进而不是新方法，但会感激地接受新方法。

Answer 1

问题1

您正在为同一个选择器（#select）调用更改函数，您应该为每个id菜单分配一个唯一的select，然后在jQuery中定位它们。

问题2

语法错误：未正确关闭更改功能 - 最后缺少});。

问题3

不要使用<center>标记，不推荐使用它们。您可以将元素包装在div中，并使用text-align: center将CSS应用于$('#selectSize').change(function() { if ($(this).val() == '1') { $("p, pre").css('font-size', '18px'); } if ($(this).val() == '2') { $("p, pre").css('font-size', '26px'); } if ($(this).val() == '3') { $("p, pre").css('font-size', '10px'); } }); $('#selectFont').change(function() { if ($(this).val() == '1') { $("p, pre").css('font-family', 'Georgia, serif'); } if ($(this).val() == '2') { $("p, pre").css('font-family', 'Verdana, Geneva, sans-serif'); } });。

正确的代码演示：

＆＃13;

.center {text-align: center;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
  <select runat="server" id="selectSize">
    <option value="1" style="background-color: white;">Standard</option>
    <option value="2" style="background-color: white;">Large</option>
    <option value="3" style="background-color: white;">Small</option>
  </select>

  <select runat="server" id="selectFont">
    <option value="1" style="background-color: white;">Serif</option>
    <option value="2" style="background-color: white;">Sans Serif</option>
  </select>
</div>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque animi soluta doloremque fuga id, porro, cupiditate ex aliquid nihil corporis consequatur libero ad repellat laboriosam voluptatum maiores accusantium nobis magni!</p>

<p>Maiores facilis ipsa consequuntur repudiandae ut esse ullam inventore nobis, cum tempora voluptatibus minus suscipit tenetur nulla dolores repellendus at molestiae, neque commodi ducimus hic? Consequuntur qui consectetur impedit fugit.</p>

<p>Sed fugiat ex omnis, consequatur accusantium, incidunt eos distinctio laborum alias quibusdam vitae labore libero nostrum est natus voluptatum harum nulla voluptatibus eveniet illum laboriosam? Distinctio sit porro harum quo.</p>

＆＃13;

<script>

＆＃13;

jsFiddle：https://jsfiddle.net/402wemp5/1/

P.S。我建议将所有JavaScript代码放在一个JS文件中，而不是放在文档中。但是，如果您选择将其保留在文档中，请将它们放在一个body标记中，最好放在DOM的底部，以确保它可以读取所有#define CONSTRUCT(type, name) type name(#name)个元素。

Answer 2

首先，检查浏览器中的检查元素是否正在运行jquery。接下来，您应为每个部分设置不同的ID。

Answer 3

而不是更改p＆amp;的单一样式规则预先使用$（）。css（），使用CSS元素和类预定义标准，小型和大型样式。 CSS是＆＃34; Cascading Style Sheets＆＃34;这意味着您可以在一个类名中定义样式规则并将其应用于父元素，并使规则级联到其子元素。

例如，在CSS文件或内联<style>块中，您可以定义以下规则：

p, pre {
    font-size: 18px;
    font-family: Georgia, serif;
}
.small p, .small pre {
    font-size: 10px;
    font-family: Verdana, Geneva, sans-serif;
}
.large p, .large pre {
    font-size: 26px;
}

然后您的代码可以执行以下操作：

<script>
$('#select').change(function(){
    var $sel = $(this),
        val = $sel.val(),
        $container = $('body');

    switch(val) {
        case '1':
           $container.removeClass('small').removeClass('large');
           break;
        case '2':
           $container.removeClass('small').addClass('large');
           break;
        case '3':
           $container.addClass('small').removeClass('large');
           break;
    }
});
</script>

如果要单独更改样式规则而不是分组为1个类，则可以为对齐定义单独的样式。

网站样式更改代码允许用户更改大小和样式不起作用

3 个答案: