$(this) 仅适用于一项 [jQuery]

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

这是因为您有多个 color

的相同 ID

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

您可以更改为以下内容并分配 classes 以将事件处理程序附加到所有 class 为 .color

的元素

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

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

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

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

您在关于元素样式的评论中也提到了这一点。由于我们将 id 换成 class，请记住相应地应用您的样式规则

#color { ... }

=>

.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 到 select 所有匹配 selector 的元素。 querySelectorAll 将匹配所有元素。

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

避免这种行为的一种方法是使用更复杂的 select 或者，例如 html #color。目前， #color（注意 space）也有效，但 jQuery 的未来版本可能 trim 字符串。

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

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

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

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

$(this) 仅适用于一项 [jQuery]

$(this) only working for one item [jQuery]

html

javascript

css

jquery

this