Question

我使用$(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>

这是我的jQuery：

$(document).ready(function(){

$('#color').click(function(){

    var color = $(this).css('background');

    $('.space').css('background',''+color+'');

  });

});

这是我的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有什么想法吗？提前谢谢。

Answer 1

这是因为您有.replace(/(\[((size=)(1|2|3|4|5|6))\])/gi, '<font size="$4">') .replace(/(\[((\/)(size))\])/gi, '</font>')

的多个相同ID

color

您可以更改为以下内容并指定类，以便将事件处理程序附加到类<div class="red" id="color"></div> <div class="orange" id="color"></div> <div class="yellow" id="color"></div>的所有元素

.color

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

同样如您对元素样式的评论中所述。由于我们正在交换课程的ID，因此请记住相应地应用您的风格规则

$('.color').click(function() { // class selector

    var color = $(this).css('background');

    $('.space').css('background',''+color+'');
});

=＆GT;

#color { ... }

Answer 2

将属性#id更改为.class。 IDS应该是独一无二的！作为结果，您的代码将如下所示：

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

});

Answer 3

ID应该是唯一的，将color id更改为类

HTML

<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>

的Javascript

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

Answer 4

首先，ID不应该每页存在多次。

应该是：

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

和JS如下所述：

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

Answer 5

警告：请勿使用此功能。 ID必须是唯一的！

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

但是，在您的情况下，jQuery会尝试使用速度更快的getElementById代替querySelectorAll来加快速度。因此，只匹配第一个元素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

另请注意background是一个速记属性。尝试获取速记属性的计算值可能会在某些浏览器（例如Firefox）上产生空字符串。更好地使用backgroundColor。

$（this）仅适用于一个项目[jQuery]

5 个答案: