首页 新闻 会员 周边 捐助

js点击显示颜色

0
[已解决问题] 解决于 2020-03-13 15:22


点击其中的颜色显示相对应的背景颜色,比如我点击红色,div中背景是红色
<select name="">
<option value="" class="fff">未知色</option>
<option value="" class="red" onclick="show">红色</option>
<option value="" class="ls">绿色</option>
<option value="" class="hs">灰色</option>
</select>
<div id="a1"></div>

a1{

            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }
小白萝卜呀的主页 小白萝卜呀 | 初学一级 | 园豆:4
提问于:2020-03-13 14:32
< >
分享
最佳答案
2
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('[name="ColorSelector"]').on('change', function() {
                $('#a1').css('background-color', $(this).val());
            })
        })
    </script>
    <style type="text/css">
        #a1 {
            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }
    </style>
</head>
<body>
    <select name="ColorSelector">
        <option value="fff">未知色</option>
        <option value="red" >红色</option>
        <option value="green">绿色</option>
        <option value="gray">灰色</option>
    </select>
    <div id="a1"></div>
</body>
</html>
奖励园豆:5
RosonJ | 老鸟四级 |园豆:4910 | 2020-03-13 14:48

没有效果呢

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-13 14:56

@小白萝卜呀:
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
這是google的,先確認能不能連到
不行的話你換個jQuery CDN

RosonJ | 园豆:4910 (老鸟四级) | 2020-03-13 14:58

@RosonJ:
目前是这样的

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-13 15:03

@小白萝卜呀:
建議先用我寫的版本測試,沒問題再逐步替換至你的頁面

RosonJ | 园豆:4910 (老鸟四级) | 2020-03-13 15:05

@小白萝卜呀:
如果不知道怎麼替換,也可將你的頁面源碼貼上來
我替你修正你再比較差異

RosonJ | 园豆:4910 (老鸟四级) | 2020-03-13 15:08

@RosonJ: 好的

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-13 15:17

@RosonJ: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
<style type="text/css">
#a1{
width: 200px;
height: 200px;
border: 1px #ccc solid;
}
</style>
</head>
<body>
<select name="ColorSelector">
<option value="fff">未知色</option>
<option value="red" class="sa">红色</option>
<option value="green">绿色</option>
<option value="gray">灰色</option>
</select>
<div id="a1">111</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('[name="ColorSelector"]').on('change', function() {
$('#a1').css('background-color', $(this).val());
})
})
</script>
</html>

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-13 15:17

@小白萝卜呀:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #a1 {
            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }
    </style>
</head>

<body>
    <select name="ColorSelector">
        <option value="fff">未知色</option>
        <option value="red" class="sa">红色</option>
        <option value="green">绿色</option>
        <option value="gray">灰色</option>
    </select>
    <div id="a1">111</div>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $('[name="ColorSelector"]').on('change', function() {
            $('#a1').css('background-color', $(this).val());
        })
    })
</script>

</html>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
這行缺了結尾標籤

RosonJ | 园豆:4910 (老鸟四级) | 2020-03-13 15:20

@RosonJ: 谢谢,可以了

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-13 15:22

@小白萝卜呀:
你用的什麼IDE,這種結構問題一般的IDE應該要提醒你修正

RosonJ | 园豆:4910 (老鸟四级) | 2020-03-13 15:22

@RosonJ: 用的谷歌,就上面给你的截图,没报错显示

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-13 15:22

@小白萝卜呀:
可以換個VSCode或Sublime試試

RosonJ | 园豆:4910 (老鸟四级) | 2020-03-13 15:28
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册