Javascript 允许用户更改网站大小和样式的网站样式更改代码无效_Javascript_Php_Jquery_Html_Css

Javascript 允许用户更改网站大小和样式的网站样式更改代码无效

javascript php jquery html css

Javascript 允许用户更改网站大小和样式的网站样式更改代码无效,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我一直在为一个大学作业制作一个网站，我希望包括一个功能，允许用户为字体大小、字体系列、填充以及p和pre标记的对齐选择预设。到目前为止，我能够创建一组预设选项，带有一个小下拉菜单，但我需要四个不同的选择菜单来分别更改1/4个方面，而不是一个菜单来更改所有4个方面字体系列的菜单已创建，但不起作用以下是章节代码： <head> <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0 /

我一直在为一个大学作业制作一个网站，我希望包括一个功能，允许用户为字体大小、字体系列、填充以及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>


标准
大的
小的
$（'#select'）。更改（函数（）{
if（$（this）.val（）=='1'）{
$（“p，pre”）.css（'font-size'，'18px'）；
} 
if（$（this）.val（）=='2'）{
$（“p，pre”）.css（'font-size'，'26px'）；
} 
如果（$（this.val（）='3'）{
$（“p，pre”）.css（'font-size'，'10px'）；
}
});


衬线
无衬线
$（'#select'）。更改（函数（）{
if（$（this）.val（）=='1'）{
$（“p，pre”）.css（'font-family'，'Georgia，serif'）；
} 
if（$（this）.val（）=='2'）{
$（“p，pre”）.css（'font-family'，'Verdana，Geneva，sans-serif'）；
}

所以我已经玩了很长时间了，但是运气不好。我试着把这两个数字放在一起，我试着把1，2，3改成不同的数字，但是什么都没有

我宁愿改进此方法，而不是使用新方法，尽管新方法将被感激地接受。

首先，通过检查浏览器中的元素来检查jquery是否正常工作。接下来，您应该为每个部分设置不同的id。

问题1

如果要对同一选择器调用更改函数（

#select

），则应为每个

select

菜单指定唯一的

id

，然后在jQuery中将其作为目标

问题2

语法错误：未正确关闭更改函数-缺少

}）在末尾
问题3
不要使用
标记，它们已被弃用。您可以将元素包装在div
中，并使用CSS
对其应用text align:center


正确的代码演示：

$（'#selectSize'）。更改（函数（）{
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'）。更改（函数（）{
if（$（this）.val（）=='1'）{
$（“p，pre”）.css（'font-family'，'Georgia，serif'）；
}
if（$（this）.val（）=='2'）{
$（“p，pre”）.css（'font-family'，'Verdana，Geneva，sans-serif'）；
}
});
.center{text align:center；}

标准
大的
小的
衬线
无衬线

Lorem ipsum dolor sit amet，奉献精英。动物的生命之源是一种液体的铜酸盐，它是一种自由劳动的物质，是一种巨大的生命之源
我的脸是共和国的共同财产，也是发明者的财产，以及在共同的国家里没有驱虫物的时间？这是一个很好的例子
所有人都有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任，有责任？区别于使用$（）.css（）更改p&pre的单一样式规则，而是使用css元素和类预定义标准、小样式和大样式。CSS是“级联样式表”的缩写，这意味着您可以在一个类名中定义样式规则，并将其应用于父元素，并将规则级联到其子元素
例如，在CSS文件或内联
块中，可以定义以下规则：
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>


$（'#select'）。更改（函数（）{
变量$sel=$（此），
val=$sel.val（），
$container=$（'body'）；
开关（val）{
案例“1”：
$container.removeClass（'small'）.removeClass（'large'）；
打破
案例“2”：
$container.removeClass（'small'）.addClass（'large'）；
打破
案例“3”：
$container.addClass（'small'）.removeClass（'large'）；
打破
}
});

如果要单独更改样式规则，而不是将其分组到一个类中，则可以为对齐定义单独的样式。
请避免使用
标记，它已被弃用。我能指出的第一个错误是，你有两个相同ID的元素，都是“select”。这将导致问题。此外，您没有关闭$（'#select'）.change（function（）{
.add}）以正确关闭它。我将首先尝试你上面的评论，尽管这个想法似乎很简单，但现在它非常有效。我的问题似乎是代码的位置。如前所述，虽然在提交之前我已经尝试过，但我并没有以不同的方式命名所选内容。我想我错过了一些明显的东西。感谢您的友好和快速的帮助！