为同一类的所有元素分配背景颜色答案

【问题标题】：Assign background-color to all elements of the same class为同一类的所有元素分配背景颜色
【发布时间】：2018-05-24 15:59:00
【问题描述】：

嘿，我正在尝试获取我悬停的元素的类名，并为这个特定的类分配背景颜色。我得到了类名 Michel 来自https://stackoverflow.com/a/21912356 的解决方案：

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

});

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

【问题讨论】：

改用普通的css
为什么不使用Pure CSS？
如果你想使用样式规则，你可以使用this solution。
@Mr Pickel 看到答案。
@pedram：因为我有一堆类并且使用纯 CSS，所以我需要编写很多代码来实现这一点。

标签： javascript jquery css

【解决方案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

【讨论】：

@gurvinder327：是的，它对我有用，谢谢！我知道，我必须在变量上使用 .css，但没有设法获得正确的语法。我实际上不太了解最后一行，但是当我悬停在元素之外时，有没有办法让背景变回白色。我还需要指定（在解决方案的最后一行，gurvinder327）随机颜色不应该是白色，而临时分配的颜色应该是明亮的颜色之一，所以黑色文本应该与背景有很好的对比（因为黑色文字和深色背景很难阅读）
@MrPickel 哦，所以你想在某个特定范围内生成随机颜色，然后尝试stackoverflow.com/questions/23277585/… ... 否则不要让它随机（为了易读性和可读性）只是在数组中保留一些特定值作为可能的背景颜色值。
@gurvinder327：再次感谢您的帮助！我现在已经完成了我想要的一切。首先：如果类名中有一个点，如class="F_03.2"，那么您的解决方案将不起作用，所以我使用了 php 的 str_replace 来删除这些点。第二：我根据@traktor53的解决方案从这里修改了您解决方案的最后一行：stackoverflow.com/a/43195379/8937563
@MrPickel 当然，请分享您所做的更改的小提琴。为了未来读者的利益，我将包含相同的内容。
@MrPickel 谢谢，如果它对你有帮助，你不能接受和支持这个答案。

【解决方案2】：

您可以将属性style设置为元素。您可以使用 jQuery cssmethod .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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可以这样做：

$(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;');
    }
});

【讨论】：

感谢 Himanshu！不幸的是，我有很多课程，所以作为您的解决方案，我必须用 elseif 或 switch 案例多次编写 {if($(e.target).hasClass("some-class"))} 。 gurvinder372 的解决方案非常有效。不过非常感谢您的努力！