下拉时div背景颜色变化答案

【问题标题】：Div background-color change upon drop-down下拉时div背景颜色变化
【发布时间】：2017-03-30 13:17:41
【问题描述】：

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

我的代码是这样的 ` Dropdown 1

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

` 完整代码在这里 http://jsfiddle.net/0c4dbr9t/7/

【问题讨论】：

那么究竟是什么问题？顺便说一句，您的样式规则是引用类 .box，而不是源代码中的 ID #box。
哦，废话。我没有注意到这一点。在这一点上是一个愚蠢的菜鸟。
感谢您的提醒。是的，我忘了'。用于班级，'#' 用于 id。
以前去过那里，我仍然喜欢偶尔访问 :) 你知道你当前的 vanilla javascript 设置只适用于你的第一个 li 元素，因为它是唯一一个定义了 ID 的元素，并且是您的 javascript sn-p 中唯一引用的一个，对吗？
是的。仅应用第一个“li”元素，因为它是在脚本中定义的元素。但我打算在上面添加更多颜色。我想如果我会为此使用 jQuery 会更好，你的想法？

标签： javascript html css twitter-bootstrap

【解决方案1】：

试试这个简单的代码

Demo

代码：

<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 class="dropdown-menu">
        <li data-color="red"><a href="#">Red</a>
        </li>
        <li data-color="blue"><a href="#">Blue</a>
        </li>
        <li data-color="green"><a href="#">Green</a>
        </li>
        <li data-color="yellow"><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="box"><div>

$( document ).ready(function() {
 $('.dropdown-menu li').click(function(){
        var color = $(this).data("color");

        $("#box").css('background-color',color);
        });
});

【讨论】：

很好。我还没有尝试使用那个“数据颜色”属性。那是 HTML5 的一部分吗？
“数据”属性的定义w3schools.com/tags/att_global_data.asp

【解决方案2】：

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

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>

css

#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;
    }

}

【讨论】：

您的代码看起来也不错。将尝试围绕您的代码 sn-p 玩我的头脑。谢谢你。我真的需要让自己习惯这种编程语言，即使我知道它有多难。
感谢您的认可。我使用了纯 javascript，这就是代码看起来更大的原因。如果您熟悉的话，使用 jquery 将是一个不错的选择。

【解决方案3】：

使用简单的javascript：

<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 class="dropdown-menu">
        <li id="red"><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"> Some Text <div>
<script>
var menu = document.querySelector("ul.dropdown-menu");
menu.onclick = function(evt) {
  console.log(evt.target.innerText)
	document.getElementById("box").style.backgroundColor = evt.target.innerText;
}
</script>

【讨论】：