Javascript 如何将ID设为变量并在函数中使用

我有这个密码。这实际上是一个测试。我想使用变量hoveredColor创建一个函数来更改“this”div的背景。但我似乎不能让它工作

<script>
$(document).ready(function(){
  var currentcolor = "red";
  var hovercolor="";
  var hoveredColor = "";
  setColor();
  $("#settings div").hover(function(){
    hoveredColor = $(this).attr('id');
  }); 

  $("#black").hover(function(){
    hovercolor = $("#black").attr("id");
    document.getElementById('this').style.backgroundColor=hovercolor;
  },function(){
    document.getElementById('this').style.backgroundColor=currentcolor;
  });
  $("#"+hoveredColor).click(function(){ 
    currentcolor = $("#"+hoveredColor).attr('id');
    setColor();
  });

</script>

<div style="display: none;width:100%;" id="settings">
    <div style="width: 50px;height:50px; background-color: blue; float: left;display: block;margin-left: 10px" id="blue"> ff </div>
    <div style="width: 50px;height:50px; background-color: black; float: left;display: block;margin-left: 10px" id="black"> Black </div>
    <div style="width: 50px;height:50px; background-color: pink; float: left;display: block;margin-left: 10px" id="pink"> Pink </div>
</div>


<div style="width: 100%; height: 100px;margin-top: 75px;" id="this">
    <p>I hope this works.</p>
</div>

$（文档）.ready（函数（）{
var currentcolor=“红色”；
var hovercolor=“”；
var hoveredColor=“”；
setColor（）；
$（“#设置div”）.hover（函数（）{
hoveredColor=$（this.attr（'id'）；
}); 
$（“#黑色”）.hover（函数（）{
hovercolor=$（“#黑色”）.attr（“id”）；
document.getElementById（'this'）.style.backgroundColor=hovercolor；
}，函数（）{
document.getElementById（'this'）.style.backgroundColor=currentcolor；
});
$（“#”+悬停颜色）。单击（函数（）{
currentcolor=$（“#”+hoveredColor）.attr（'id'）；
setColor（）；
});
ff
黑色
粉红色
我希望这能奏效

我对您的脚本做了一些改进，下面是我所做的：

如代码所示，声明名为

currentcolor

的全局颜色，以便当鼠标离开

#settings

中的子对象

时，该

div将恢复为红色背景

声明一个名为

fixcolor

的全局变量。这将让我们知道用户是否单击了一个div来设置/修复颜色，我们将在稍后对其进行更新，以便不会干扰鼠标离开事件

提取上述所有信息后，以下是jQuery代码（和）：

---

但是，以下是一些建议：

不将颜色存储在ID中，而是作为HTML5

数据-

属性存储。这允许您更改div的颜色，而无需更新样式表中的ID及其选择器（如果有）

取消隐藏

#设置

。我看不出隐藏有什么意义，因为它只会使脚本无法使用，因为所有div都对用户隐藏

要使用

data-

属性，请将

id

替换为您选择的名称，例如

data-bgcolor

：

<div style="width:100%;" id="settings">
    <div style="..." data-bgcolor="blue"> ff </div>
    <!-- MORE -->
</div>

ff

---

可以使用

$（this.data（'bgcolor'）

或

$（this.attr（'data-bgcolor'））访问此属性中的值

由于JavaScript代码非常依赖于HTML标记的格式，因此在JavaScript中创建HTML可能是个好主意。如果需要更改页面的这个小“组件”，可以在一个位置（即.js）进行更改而不必在HTML和JavaScript中进行更改

下面是可能的情况

var DEFAULT\u COLOR='red'，
颜色选项=[
{'text'：'Blue'，'color'：'Blue'}，
{'text'：'Black'，'color'：'Black'}，
{'text'：'Pink'，'color'：'Pink'}，
],
颜色选项模板={{text}}，
设置_div=$（“#设置”），
bg_change_div=$（'this'），
颜色\u选项\u html=“”，
颜色选项html=''；
功能设置颜色（元素、颜色）{
$（ele.css（'background-color'，color）；
}
//为颜色选项div构建HTML。
$。每个（颜色选项，功能（i，颜色选项）{
color\u option\u html=color\u option\u TEMPLATE.replace（/{{color}}}/g，color\u option.color）；
color\u option\u html=color\u option\u html.replace（/{{text}}/，color\u option.text）；
颜色选项html+=颜色选项html；
});
$（文档）.ready（函数（）{
//将颜色选项HTML添加到#设置
设置\u div.html（颜色\u选项\u html）；
//为#此设置默认背景色
setBgColor（bg\u change\u div，默认颜色）；
设置_div.on（'mouseenter'，'color option'，函数（e）{
setBgColor（bg_change_div，$（e.currentTarget）.data（'color'）；
});
设置\u div.on（'mouseleave'，'.color option'，function（）{
setBgColor（bg\u change\u div，默认颜色）；
});
})；

.color选项{
高度：50px；
宽度：50px；
显示：内联块；
左边距：10px；
}

我希望这能奏效

在您尝试绑定

单击事件处理程序时，
hoverColor
仍然是一个空字符串。分配
hoveredColor=$（this）.attr（'id'））
仅在相应的代码悬停在上方时发生，这是在计算
元素后很长一段时间。添加一些
控制台。记录
语句以了解代码是如何执行的。您能给我一个如何执行此操作的提示吗？实际上，如果我直接使用悬停的di的id，我可以执行此操作v、 但是那要花很多时间。谢谢。我试试这个。
<div style="width:100%;" id="settings">
    <div style="..." data-bgcolor="blue"> ff </div>
    <!-- MORE -->
</div>