Question

嘿那里，我正在尝试获取我正在盘旋的元素的类名，并为此特定类指定背景颜色。我得到了类名来自https://stackoverflow.com/a/21912356的Michel解决方案：

$(document).on('mouseover', 'div', function(e) {
console.log($(e.target).attr('class'));

}）;

但是我如何实现我正在盘旋的类的所有元素都获得相同的颜色（或者 - 作为改进 - 随机颜色）？

Answer 1

但是我如何实现我正在徘徊的班级的所有元素获得相同的颜色（或 - 作为改进 - 随机颜色）？

你几乎就在那里，只需使用相同的类名作为选择器

$(document).on('mouseover', 'div', function(e) {
   var className = $(e.target).attr('class');
   $( "." + className ).css( "background-color", ranCol() );
});

var ranCol = () => '#'+(Math.random()*0xFFFFFF<<0).toString(16);

修改

OP附加了一份有效的fiddle

Answer 2

你可以这样做：

$(document).on('mouseover', 'div', function(e) {
    console.log($(e.target).attr('class'));
    if($(e.target).hasClass("some-class"))  //"some-class" will be the class to which you need to apply css.
    {
        $(e.target).attr('style','background-color:blue;');
    }
});

Answer 3

您可以将属性style设置为元素。您可以使用jQuery css方法使用多个样式属性。see here。所以你通过使用JavaScript和Jquery实现如下。

$(document).on('mouseover', 'div', function(e) {
let className = e.target.className.split(" ")[0];
let styles = 'background-color:red; font-size:15em; transform:rotate(20deg)';
document.getElementsByClassName(className)[0].style = styles;
 // or
 $("."+className).css({"background-color":"green"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="myClass">hello </div>

Answer 4

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).on('mouseover', 'div', function(e) {
   var divClass = $(this).attr('class');
   $( "." + divClass ).css( "background-color", getRandomColor() );
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>
</head>
<body>

<div class="first">
<div>one</div>
</div>
<div class="second">
<div>two</div>
</div>
<div class="third">
<div>three</div>
</div>

</body>
</html>

＆＃13;

将背景颜色指定给同一个类的所有元素

4 个答案: