Question

使用JQuery / JS＆amp;选择Boxes以根据我希望用户能够选择的“超级管理员”选择更改样式表，并选择包含用户级别“Super admin”描述的div（位于下方）形式）改变其

.superAdmin div {background-color: #000;}

我假设它对onChange();句柄有某种形式的操纵。

很抱歉，如果这个问题是低级别的，但我是一个真正的JS初学者，请让JQuery。 +1，如果您还可以提供如何实现代码（放在<head></head>标签中的内容）

在此先感谢，这个网站的巨大支持者（我遇到的所有问题的90％已经在这里被问到，我只是找不到任何关于此...）

Answer 1

假设您有一个CSS样式表，其中包含您可能要添加的所有类的定义：

.user {background-color: #F00;}
.admin {background-color: #0F0;}
.superAdmin {background-color: #00F;}

并且您有选择框的HTML：

<select id="css-changer">
    <option></option>
    <option value="user">User</option>
    <option value="admin">Admin</option>
    <option value="superAdmin">Super Admin</option>
</select>

和你的div：

<div id="user">User div</div>
<div id="admin">Admin div</div>
<div id="superAdmin">Super Admin div</div>

然后你的jQuery javascript将是：

$(document).ready(function() {
    $("#css-changer").change(function() {
        var value = $(this).find("option:selected").val();
        switch(value) {
            case "user":
                $("#user").addClass("user");
                $("#admin,#superAdmin").removeClass(); // removes all classes
                break;
            case "admin":
                $("#admin").addClass("admin");
                $("#user,#superAdmin").removeClass(); // removes all classes
                break;
            case "superAdmin":
                $("#superAdmin").addClass("superAdmin");
                $("#user,#admin").removeClass(); // removes all classes
                break;
        }
    });
});

你可以see this working。

要在页面中获取JS和CSS，请使用正确的定义创建外部样式表，并将其as described by the spec包含如下标记：

<link href="mystyle.css" rel="stylesheet" type="text/css">

并确保包含jQuery和外部javascript文件（以使事情不引人注目）。要包含它们，请使用以下HTML：

<!-- jQuery goes first! -->
<script src="path/to/jQuery/CDN/jquery-min-1.5.1.js" type="text/javascript"></script>
<script src="myExternal.js" type="text/javascript"></script>

Answer 2

也许

$("#div").change(function(){

    $("#div1").css("color", "red");

})

使用JQuery / JS＆amp;选择“框”以根据选择更改样式表

2 个答案: