Javascript $（此选项）仅适用于一个项目[jQuery]

我使用

$（this）

来获取HTML元素的css属性，但它只适用于其中一个元素。这些项目是相同的，除了工作的项目外，其他所有项目都是相对定位的

这是我的HTML：

  <div class="red" id="color"></div>
  <div class="orange" id="color"></div>
  <div class="yellow" id="color"></div>
  <div class="green" id="color"></div>
  <div class="blue" id="color"></div>
  <div class="purple" id="color"></div>
  <div class="pink" id="color"></div>
  <div class="black" id="color"></div>
  <div class="white" id="color"></div>

  <br/><br/><br/><br/><br/>

  <div class="space"></div>

这是我的CSS：

body {
  margin-top:55px;
  margin-left:60px;
  margin-right:60px;
  margin-bottom:60px;
}

#color {
  float:left;
  border:1px solid #A3A3A3;
  cursor:pointer;
}

.red {
  height:49px;
  width:49px;
  background:#8A0B0B;
}

.orange {
  height:49px;
  width:49px;
  background:#E89229;
  position:relative;
  left:17px;
}

.yellow {
  height:49px;
  width:49px;
  background:#EBD508;
  position:relative;
  left:34px;
}

.green {
  height:49px;
  width:49px;
  background:#3B8242;
  position:relative;
  left:51px;
}

.blue {
  height:49px;
  width:49px;
  background:#6E97D5;
  position:relative;
  left:68px;
}

.purple {
  height:49px;
  width:49px;
  background:#542462;
  position:relative;
  left:85px;
}

.pink {
  height:49px;
  width:49px;
  background:#FACCFA;
  position:relative;
  left:102px;
}

.black {
  height:49px;
  width:49px;
  background:#000000;
  position:relative;
  left:119px;
}

.white {
  height:49px;
  width:49px;
  background:#ffffff;
  position:relative;
  left:136px;
}

.space {
  height:657px;
  width:500px;
  border:2px solid #A3A3A3;
}

---

关于如何让jQuery为所有div工作，您有什么想法吗？提前感谢。

这是因为您有多个颜色相同的id

<div class="red" id="color"></div>
<div class="orange" id="color"></div>
<div class="yellow" id="color"></div>

<div class="color red"></div>
<div class="color orange"></div>
<div class="color yellow"></div>

---

也如您关于元素样式的评论中所述。由于我们将id交换为类，请记住相应地应用样式规则

#color { ... }

=>

---

将属性

#id

更改为

.class

。ID应该是唯一的！因此，您的代码如下所示：

$('.color').click(function(){    
    var color = $(this).css('background');    
    $('.space').css('background',''+color+'');    
  });

});

---

ID应该是唯一的，将

颜色更改为class

HTML

首先，ID不应该在每个页面上存在超过一次

应该是：

<div id="red" class="color"></div>
<div id="orange" class="color"></div>

警告：不要使用此选项。ID必须是唯一的

通常，jQuery用于选择与选择器匹配的所有元素
querySelectorAll
将匹配所有元素

但是，在您的例子中，jQuery尝试加快速度，使用更快的而不是
querySelectorAll
。因此，只匹配第一个元素

避免这种行为的一种方法是使用更复杂的选择器，如
html\color
。目前，
#color
（注意空格）也可以使用，但是jQuery的未来版本可能会对字符串进行修剪


$（'html#color'）。单击（函数（）{
var color=$（this.css（'backgroundColor'）；
$（'.space'）.css（'background'，''+color+''）；
});
正文{
边缘顶部：55px；
左边距：60像素；
右边距：60px；
边缘底部：60px；
}
#颜色{
浮动：左；
边框：1px实心#A3A3；
光标：指针；
}
瑞德先生{
高度：49px；
宽度：49px；
背景：#8A0B0B；
}
.橙色{
高度：49px；
宽度：49px；
背景：#E89229；
位置：相对位置；
左：17px；
}
黄先生{
高度：49px；
宽度：49px；
背景：#EBD508；
位置：相对位置；
左：34px；
}
格林先生{
高度：49px；
宽度：49px；
背景:#3B8242；
位置：相对位置；
左：51px；
}
蓝先生{
高度：49px；
宽度：49px；
背景#6E97D5；
位置：相对位置；
左：68px；
}
紫色{
高度：49px；
宽度：49px；
背景#542462；
位置：相对位置；
左：85像素；
}
.粉红{
高度：49px；
宽度：49px；
背景：#FACCFA；
位置：相对位置；
左：102px；
}
布莱克先生{
高度：49px；
宽度：49px；
背景：#000000；
位置：相对位置；
左：119px；
}
怀特先生{
高度：49px；
宽度：49px；
背景：#ffffff；
位置：相对位置；
左：136px；
}
.空间{
高度：657px；
宽度：500px；
边框：2个实心#A3A3；
}









首先，属性
id
应该是唯一的。删除id属性，改为再添加一个名为
color
的类，并在JS中使用
.color
。试试看..@Lal似乎不起作用。。。它只是打乱了我的定位，使它们都不起作用。将CSS中的
#color
更改为
.color
。这会有帮助吗？两个类属性不起作用…你必须像
@Lal-hehe-nice-catch:）
.color { ... }

$('.color').click(function(){    
    var color = $(this).css('background');    
    $('.space').css('background',''+color+'');    
  });

});

<div class="color red"></div>
<div class="color orange"></div>
<div class="color yellow"></div>
<div class="color green"></div>
<div class="color blue"></div>
<div class="color purple"></div>
<div class="color pink"></div>
<div class="color black"></div>
<div class="color white"></div>

$(".color").on("click", function () {
    var color = $(this).css('background');
    $('.space').css('background-color',color);
});

<div id="red" class="color"></div>
<div id="orange" class="color"></div>

$('.color').click(function() { // class selector    
    var color = $(this).css('background');    
    $('.space').css('background',''+color+'');
});