Javascript 下拉列表中的Div背景颜色更改

我知道javaScript，但我不习惯它，因为我更专注于创建UI设计。所以我决定参加一些短期课程，然后我遇到了这个问题。应该有下拉列表，其中包括4项选择：红色，蓝色，绿色，黄色。如果用户选择一种颜色，比如说黄色，下面的div框将变为黄色。顺便说一句，我用了Bootstrap

我的代码是这样的`下拉列表1

` 完整代码驻留在这里 试试这个简单的代码

代码：

$（文档）.ready（函数（）{
$（'.下拉菜单li'）。单击（函数（）{
var color=$（this.data（“color”）；
$（“#框”）.css（'background-color'，color）；
});
});

试试这个简单的代码

代码：

$（文档）.ready（函数（）{
$（'.下拉菜单li'）。单击（函数（）{
var color=$（this.data（“color”）；
$（“#框”）.css（'background-color'，color）；
});
});

如果这是您需要的，请告诉我

html

<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

    <ul id="dd" class="dropdown-menu">
       <li><a href="#">Red</a>
        </li>
        <li><a href="#">Blue</a>
        </li>
        <li><a href="#">Green</a>
        </li>
        <li><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="box"><div>

js

#box {
margin-top: 20px;
background-color: #000;
padding: 50px;
}

var ul = document.getElementById('dd');
ul.addEventListener("click", changeColor, false);

function changeColor (e) {
  if(e.target.nodeName == "A") {
       document.getElementById("box").style.background =e.target.innerHTML;
    }

}

---

如果这是你需要的，请告诉我

html

<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

    <ul id="dd" class="dropdown-menu">
       <li><a href="#">Red</a>
        </li>
        <li><a href="#">Blue</a>
        </li>
        <li><a href="#">Green</a>
        </li>
        <li><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="box"><div>

js

#box {
margin-top: 20px;
background-color: #000;
padding: 50px;
}

var ul = document.getElementById('dd');
ul.addEventListener("click", changeColor, false);

function changeColor (e) {
  if(e.target.nodeName == "A") {
       document.getElementById("box").style.background =e.target.innerHTML;
    }

}

---

使用简单javascript：

一些文本
var菜单=document.querySelector（“ul.下拉菜单”）；
menu.onclick=功能（evt）{
log（evt.target.innerText）
document.getElementById（“box”）.style.backgroundColor=evt.target.innerText；
}

使用简单的javascript：

一些文本
var菜单=document.querySelector（“ul.下拉菜单”）；
menu.onclick=功能（evt）{
log（evt.target.innerText）
document.getElementById（“box”）.style.backgroundColor=evt.target.innerText；
}

那么到底是什么问题？顺便说一下，您的样式规则引用的是类

.box

，而不是源代码中的ID

#box

。哦，糟了。我没注意到。在这一点上我是个笨蛋。谢谢你提醒我。是的，我忘了“.”代表类，“#”代表id。以前去过那里，我还是偶尔会去：）你知道你当前的普通javascript设置只适用于你的第一个

li

元素，因为它是唯一一个定义了id的元素，也是你的javascript代码段中唯一引用的元素，对吗？是的。仅应用第一个“li”元素，因为它是在脚本上定义的元素。但是我打算在上面加上更多的颜色。我想我最好使用jQuery来解决这个问题，你的想法呢？那么到底是什么问题呢？顺便说一下，您的样式规则引用的是类

.box

，而不是源代码中的ID

#box

。哦，糟了。我没注意到。在这一点上我是个笨蛋。谢谢你提醒我。是的，我忘了“.”代表类，“#”代表id。以前去过那里，我还是偶尔会去：）你知道你当前的普通javascript设置只适用于你的第一个

li

元素，因为它是唯一一个定义了id的元素，也是你的javascript代码段中唯一引用的元素，对吗？是的。仅应用第一个“li”元素，因为它是在脚本上定义的元素。但是我打算在上面加上更多的颜色。我想我最好用jQuery来处理这个问题，你的想法是什么？很好。我还没有尝试使用“数据颜色”属性。这是HTML5的一部分吗？“数据”属性的定义很好。我还没有尝试使用“数据颜色”属性。这是HTML5的一部分吗？“数据”属性的定义您的代码似乎也很好。我会试着和你们的代码片段制作人员玩我的头脑。谢谢你。我真的需要让自己习惯这种编程语言，即使我知道它有多难。谢谢你的认可。我使用了纯javascript，这就是代码看起来更大的原因。如果您熟悉jquery，那么使用jquery将是一个不错的选择。您的代码看起来也不错。我会试着和你们的代码片段制作人员玩我的头脑。谢谢你。我真的需要让自己习惯这种编程语言，即使我知道它有多难。谢谢你的认可。我使用了纯javascript，这就是代码看起来更大的原因。如果您熟悉jquery，那么使用jquery将是一个不错的选择。