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;
}
最佳答案
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
没有效果呢
@小白萝卜呀:
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
這是google的，先確認能不能連到
不行的話你換個jQuery CDN
@RosonJ: 
目前是这样的
@小白萝卜呀:
建議先用我寫的版本測試，沒問題再逐步替換至你的頁面
@小白萝卜呀:
如果不知道怎麼替換，也可將你的頁面源碼貼上來
我替你修正你再比較差異
@RosonJ: 好的
@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>
@小白萝卜呀:
<!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: 谢谢，可以了
@小白萝卜呀:
你用的什麼IDE，這種結構問題一般的IDE應該要提醒你修正
@RosonJ: 用的谷歌，就上面给你的截图，没报错显示
@小白萝卜呀:
可以換個VSCode或Sublime試試
